Highlight the search text – angular 2

by

You can do that by creating a pipe and applying that pipe to the summary part of array inside ngfor. Here is the code for Pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'highlight'
})

export class HighlightSearch implements PipeTransform {

    transform(value: any, args: any): any {
        if (!args) {return value;}
        var re = new RegExp(args, 'gi'); //'gi' for case insensitive and can use 'g' if you want the search to be case sensitive.
        return value.replace(re, "<mark>$&</mark>");
    }
}

and then in markup apply it on a string like this:

<div innerHTML="{{ str | highlight : 'search'}}"></div>

Replace ‘search’ with the word you want to highlight.

Hope this will help.

More Related Contents:

  1. (change) vs (ngModelChange) in angular
  2. What does Angular 2 hashtags in template mean?
  3. Scroll to element on click in Angular 4
  4. How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2
  5. Importing lodash into angular2 + typescript application
  6. Angular 2 Sibling Component Communication
  7. JS : Convert Array of Strings to Array of Objects
  8. angular 2 how to return data from subscribe
  9. Angular4 – No value accessor for form control
  10. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  11. Deep copy an array in Angular 2 + TypeScript
  12. How to call JavaScript functions from Typescript in Angular 5?
  13. ngOnInit not being called when Injectable class is Instantiated
  14. Angular 4 pass data between 2 not related components
  15. Angular 2 – communication of typescript functions with external js libraries
  16. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  17. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  18. Rxjs toPromise() deprecated
  19. How to check for isBrowser in Angular 4
  20. Unraveling Angular 2 book, Chapter 1, Example 5
  21. How to achieve a debounce service on input keyup event in angular2 with rxjs
  22. Call a function on click event in Angular 2
  23. Angular2 too many file requests on load
  24. How to add bootstrap in angular 6 project? [duplicate]
  25. Safe value must use [property]=binding after bypass security with DomSanitizer
  26. Storing Objects in localStorage
  27. Subscribe to observable is returning undefined
  28. How to check empty object in angular 2 template using *ngIf
  29. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  30. angular 2 access ng-content within component

Leave a Comment