SkyTextHighlightModule@skyux/indicatorsnpm install --save-exact @skyux/indicators<div class="sky-margin-stacked-lg">
<sky-input-box labelText="Text to highlight" [stacked]="true">
<input type="text" [(ngModel)]="searchTerm" />
</sky-input-box>
</div>
<div class="sky-margin-stacked-lg">
<sky-checkbox [(ngModel)]="showAdditionalContent">
<sky-checkbox-label> Display additional content </sky-checkbox-label>
</sky-checkbox>
</div>
<div [skyHighlight]="searchTerm">
The text that you enter is highlighted here.
<div *ngIf="showAdditionalContent">
This additional content is highlighted too!
</div>
</div>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';
import { SkyTextHighlightModule } from '@skyux/indicators';
@Component({
standalone: true,
selector: 'app-demo',
templateUrl: './demo.component.html',
imports: [
CommonModule,
FormsModule,
SkyCheckboxModule,
SkyInputBoxModule,
SkyTextHighlightModule,
],
})
export class DemoComponent {
protected searchTerm = '';
protected showAdditionalContent = false;
}