ng-text-word-highlight
v0.0.4
Published
Angular component to highlight words within a text.
Downloads
14
Maintainers
Readme
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 {}