DataGrid Search Highlight

Highlight search terms inside grid or custom content without filtering rows out of view.

Search

Visual match highlighting with column scope control

Search in:

Code snippet

Grid example - component setup and template binding

      import { Component } from '@angular/core';
import {
  ColumnDef,
  Datagrid,
  NgbSearchHighlightComponent,
  NgbSearchHighlightField,
} from '@angular-bootstrap/ngbootstrap';

@Component({
  standalone: true,
  imports: [Datagrid, NgbSearchHighlightComponent],
  template: `
    <ngb-search-highlight
      [fields]="highlightFields"
      [term]="highlightTerm"
      [selectedFields]="highlightFieldKeys"
      (termChange)="highlightTerm = $event"
      (selectedFieldsChange)="highlightFieldKeys = $event"
    ></ngb-search-highlight>

    <ngb-datagrid
      [columns]="columns"
      [data]="employees"
      [searchHighlightTerm]="highlightTerm"
      [searchHighlightFields]="highlightFieldKeys"
    ></ngb-datagrid>
  `,
})
export class EmployeeHighlightSearchDemo {
  highlightTerm = '';
  highlightFieldKeys = ['name', 'email', 'department'];

  readonly highlightFields: NgbSearchHighlightField[] = [
    { field: 'name', label: 'Name' },
    { field: 'email', label: 'Email' },
    { field: 'department', label: 'Department' },
  ];

  readonly columns: ColumnDef<Employee>[] = [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'department', header: 'Department' },
  ];
}

API notes - key inputs, outputs, and column properties

      // Standalone usage with any grid/list
onHighlightSelection(change: NgbSearchHighlightSelectionChange): void {
  this.query = change.term;
  this.fields = change.selectedFields;
}

// Component inputs
fields: NgbSearchHighlightField[];
term: string;
selectedFields: string[];
allowEmptySelection = false;

API Information

Property	Type	Default	Description
`ngb-search-highlight`	`Standalone component`	`-`	Renders reusable search input and field-scope chips for highlight workflows.
`fields`	`NgbSearchHighlightField[]`	`-`	Declares the fields users can include in highlight matching.
`term`	`string`	`-`	Current highlight search text.
`selectedFields`	`string[]`	`-`	Current field keys included in highlight matching.
`allowEmptySelection`	`boolean`	`-`	Allows all field chips to be deselected when set to true.
`termChange`	`EventEmitter<string>`	`-`	Emits when the search text changes.
`selectedFieldsChange`	`EventEmitter<string[]>`	`-`	Emits when field chip selection changes.
`selectionChange`	`EventEmitter<NgbSearchHighlightSelectionChange>`	`-`	Emits combined term and selectedFields state.
`Datagrid.searchHighlightTerm`	`string`	`-`	Text used by ngb-datagrid to mark matching substrings in cells.
`Datagrid.searchHighlightFields`	`string[] \| null`	`-`	Restricts grid highlighting to specific column fields; null uses all visible columns.