NgTextWordHighlight

Angular component to highlight words within a text.

Usage

Just provide it with ansearch terms and a body of text to highlights word.

<div ngTextWordHighlight 
  [content]="'This is test data'"
  [searchTerm]="'test'"
  [caseSensitive]="false">
</div>

And the ng-text-word-highlight will mark all occurrences of search terms within the text: https://stackblitz.com/edit/angular-geov26?file=src%2Fapp%2Fapp.module.ts

Props

Property	Type	Required?	Description
textToHighlight	String	✓	Text to highlight matches in
searchTerm	String |	✓	search words. String search terms are automatically cast to RegExps unless autoEscape is true.
caseSensitive	Boolean		Search should be case sensitive; defaults to false

Installation

yarn add ng-text-word-highlight

npm i --save ng-text-word-highlight

Import the NgTextWordHighlightModule in to your root AppModule.

import { NgTextWordHighlightModule } from "ng-text-word-highlight";
@NgModule({
  imports: [NgTextWordHighlightModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

License

MIT