Highlight match in a list of results not working with Angular 2

[aimingxu]

I try to highlight the matching search term in a list of search result. It briefly highlighted the matching character then entire results disappeared. Here is my code.
"<div *ngFor="let existingMatter of matters" class="row matter-row"...
"<div [highlight]="searchCriteria.text" >{{existingMatter?.description}} ...
if I hard-code the results like this, it is working
"<div *ngFor="let existingMatter of matters" class="row matter-row" ...
"<div [highlight]="searchCriteria.text" >hard-code the results here...

Thanks!

[snics]

+1

[Alexits93]

So I changed the ngOnChanges, so it will only call the function when the page is already rendered to avoid intervention in the results. Second, I call the highlight function after ngAfterViewChecked too, so the detected changes will be highlighted in the search results too. For me it's working properly, I had a similar task. I hope it works out four you aswell.

export class HighlightDirective implements OnChanges, AfterViewInit, AfterViewChecked {

@Input('highlight') searchTerm = undefined;
@Input() caseSensitive = true;

private viewRendered = false;
private WRAPPER_TOKEN = '==--==##';

constructor(private el: ElementRef) {
}

ngOnChanges(changes: SimpleChanges): void {
  if (this.viewRendered) {
    this.highlightSearchTerm();
  }
}

ngAfterViewInit(): void {
  this.highlightSearchTerm();
}

ngAfterViewChecked(): void {
  this.viewRendered = true;
  this.highlightSearchTerm();
}

}