DataGrid Advanced Search

Build reusable advanced search descriptors with grouped rules, operators, and field metadata.

Search

Multi-rule search with operators and AND/OR logic

Matchof the following rules

When

AND

Showing 500 of 500 rows

Code snippet

Grid example - component setup and template binding

      import { Component } from '@angular/core';
import {
  ColumnDef,
  Datagrid,
  NgbAdvancedSearchComponent,
  NgbAdvancedSearchField,
  NgbAdvancedSearchRule,
  NgbCompositeFilterDescriptor,
} from '@angular-bootstrap/ngbootstrap';

@Component({
  standalone: true,
  imports: [Datagrid, NgbAdvancedSearchComponent],
  template: `
    <ngb-advanced-search
      [fields]="fields"
      [rules]="rules"
      [logic]="logic"
      (rulesChange)="rules = $event"
      (logicChange)="logic = $event"
      (filterChange)="filter = $event"
    ></ngb-advanced-search>

    <ngb-datagrid
      [columns]="columns"
      [data]="employees"
      [filter]="filter"
      [enableFiltering]="true"
      [filterable]="'none'"
    ></ngb-datagrid>
  `,
})
export class EmployeeAdvancedSearchDemo {
  logic: 'and' | 'or' = 'and';
  filter: NgbCompositeFilterDescriptor | null = null;
  rules: NgbAdvancedSearchRule[] = [
    { field: 'department', operator: 'contains', value: '' },
    { field: 'salary', operator: 'gte', value: '' },
  ];

  readonly fields: NgbAdvancedSearchField[] = [
    { field: 'name', label: 'Name' },
    { field: 'department', label: 'Department' },
    { field: 'salary', label: 'Salary', type: 'number' },
    { field: 'joinDate', label: 'Join Date', type: 'date' },
  ];

  readonly columns: ColumnDef<Employee>[] = [
    { field: 'name', header: 'Name' },
    { field: 'department', header: 'Department' },
    { field: 'salary', header: 'Salary', type: 'number' },
    { field: 'joinDate', header: 'Join Date', type: 'date' },
  ];
}

API notes - key inputs, outputs, and column properties

      // Advanced Search interfaces
interface NgbAdvancedSearchField {
  field: string;
  label: string;
  type?: ColumnType;
  filterType?: NgbColumnFilterType;
  defaultFilterOperator?: NgbFilterOperator | '';
  allowedFilterOperators?: NgbFilterOperator[];
}

interface NgbAdvancedSearchRule {
  field: string;
  operator: NgbFilterOperator;
  value: any;
}

// Outputs
rulesChange: EventEmitter<NgbAdvancedSearchRule[]>;
logicChange: EventEmitter<'and' | 'or'>;
filterChange: EventEmitter<NgbCompositeFilterDescriptor>;

API Information

Property	Type	Default	Description
`ngb-advanced-search`	`Standalone component`	`-`	Renders field/operator/value rules and AND/OR logic outside the grid.
`fields`	`NgbAdvancedSearchField[]`	`-`	Declares searchable fields, labels, types, default operators, and allowed operators.
`rules`	`NgbAdvancedSearchRule[]`	`-`	Controls the current rule list.
`logic`	`"and" \| "or"`	`-`	Controls how completed rules are joined.
`rulesChange`	`EventEmitter<NgbAdvancedSearchRule[]>`	`-`	Emits rule edits so the host can keep search-builder state.
`logicChange`	`EventEmitter<"and" \| "or">`	`-`	Emits AND/OR logic changes.
`filterChange`	`EventEmitter<NgbCompositeFilterDescriptor>`	`-`	Emits a grid-compatible filter descriptor when Search is clicked.
`Datagrid.filter`	`NgbCompositeFilterDescriptor \| null`	`-`	Receives the emitted advanced-search descriptor to filter rows.