There is a search form where, by the word, I look for all the similarities in the database. In an angular I list out.

enter image description here

The question is, is it possible to highlight the found coincidence for more convenient navigation, because the text can be many and finding an entry will be quite problematic.

HTML

<div class="form-group"> <input type="text" [(ngModel)]="text" class="form-control" placeholder="Search" name="text"> <button type="submit" class="btn btn-default" (click)="search()">Submit</button> 

 <div *ngIf="SlidesFinded.length != 0"> <table class='table'> <thead> <tr> <th>Slide Id</th> <th> Presentation Id </th> <th>Slide Text</th> </tr> </thead> <tbody> <tr *ngFor="let Slide of SlidesFinded;"> <td>{{ Slide.idSlide }}</td> <td>NULL</td> <td> {{ Slide.textSlide }} </td> </tr> </tbody>

Angular

 export class TextSlidesComponent { public text: string; public SlidesFinded: any []; constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {} search() { this.http.get<string[]>('/search/' + this.text).subscribe(result => { this.SlidesFinded = result; }, error => { console.log('an error occured!'); console.log(error); }); } }

1 answer 1

Somehow you looked bad, on the Internet a lot of examples on this topic, create a Pipe , declare in declarations and use in the template:

 @Pipe({ name: 'highlight' }) export class HighlightPipe { public transform(value: string, predicate: string): string { return value.replace(new RegExp(predicate, 'gi'), `<mark>${predicate}</mark>`); } }

In the template we associate with the directive innerHTML :

 <input #input (input)="search($event.target.value)"> <tbody> <tr *ngFor...> <td [innerHTML]="Slide.textSlide | highlight: input.value"></td> </tr> </tbody>
  • I used the example that was pointed out to me in comments. When using [innerHTML], my site does not display. Made a template like this <td>{{Slide.textSlide | highlight: text}}</td> <td>{{Slide.textSlide | highlight: text}}</td> everything works, but the found text is displayed with tags, that is, it is not formatted. So, for example, lorem <mark> example </ mark> ipsum - richardgir
  • Well, because these tags are being screened and they are inserted as text, which means it does not display the site? - overthesanity
  • since I am doing Angular c .Net Cor'om, I have a page with Loading ... - richardgir
  • here .net, what does the console write? - overthesanity
  • overlooked the connection with inputom. Everything works, thank you! - richardgir