Filtering (Angular)

Add column filtering to the Angular grid using built-in operators, custom filter components, and live updates as users refine their search criteria today.

filterable-grid.component.ts

import { Component } from "@angular/core";
import { GpGridComponent, type ColumnDefinition } from "@gp-grid/angular";

@Component({
  selector: "app-filterable-grid",
  standalone: true,
  imports: [GpGridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [rowData]="data"
        [rowHeight]="36"
      />
    </div>
  `,
})
export class FilterableGridComponent {
  columns: ColumnDefinition[] = [
    { field: "name", cellDataType: "text", width: 150, filterable: true },
    { field: "salary", cellDataType: "number", width: 120, filterable: true },
  ];

  data = [/* your data */];
}

Grouped Conditions

The condition editor makes Boolean precedence explicit. Conditions live inside group cards: one AND/OR selector joins the conditions in a group, while a separate selector joins the groups themselves.

Use Add condition to extend the current group.
Use Add group to create a separate branch.
Empty conditions and groups are discarded when you apply the filter.

This means the popup can distinguish (A AND B) OR C from A AND (B OR C). The first expression is represented as:

import type { ColumnFilterModel } from "@gp-grid/angular";

const filter: ColumnFilterModel = {
  groups: [
    {
      conditions: [
        { type: "text", operator: "startsWith", value: "A" },
        { type: "text", operator: "endsWith", value: "z" },
      ],
      combination: "and",
    },
    {
      conditions: [
        { type: "text", operator: "equals", value: "Giovanni" },
      ],
      combination: "and",
    },
  ],
  combination: "or",
};

ColumnFilterModel.combination joins groups. Each FilterConditionGroup.combination joins the conditions inside that group. Filters belonging to different columns are combined with AND at row level.

Migrating Flat Condition Models

The component's GridCore.setFilter() still accepts the previous flat model with conditions, combination, and optional per-condition nextOperator properties. It preserves the old left-to-right result and normalizes it into equivalent groups. The grid's filter state and server-side DataSourceRequest.filter always use the grouped shape.

Use normalizeColumnFilterModel(legacyFilter) when you want to migrate stored filter state explicitly.