高亮
IMPORT MODULE

来自 ng-zorro-antd/core/highlight

代码演示

abcdefghijklmnopqrstuvwxyz

StringSearch Value
基本

最简单的用法。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-highlight-simple',
  template: `
    <p class="mb-md" [innerHTML]="str | nzHighlight: searchValue:'i':'highlight'"></p>
    <nz-input-group nzAddOnBefore="String" class="mb-md">
      <input type="text" nz-input [(ngModel)]="str" />
    </nz-input-group>
    <nz-input-group nzAddOnBefore="Search Value">
      <input type="text" nz-input [(ngModel)]="searchValue" />
    </nz-input-group>
  `,
  styles: [
    `
      :host ::ng-deep .highlight {
        color: #f50;
      }
    `,
  ],
})
export class ComponentsHighlightSimpleComponent {
  str = [...Array(26)].map((_, i) => (i + 10).toString(36)).join('');
  searchValue = 'mn';
}