---
product: "AG Grid"
title: "Advanced Filter - Filter Model / API"
description: "The state of the Advanced Filter can be read as an Advanced Filter Model, and applied again later by setting that model back. This allows the filter to be saved and restored, for example across page reloads or between users, or to be set programmatically without typing an expression."
enterprise: true
framework: angular
version: "36.3.0"
related:
    - title: "Columns & Filter Options"
      url: "https://www.ag-grid.com/archive/36.3.0/angular-data-grid/filter-advanced-columns/"
    - title: "Input & Builder"
      url: "https://www.ag-grid.com/archive/36.3.0/angular-data-grid/filter-advanced-input-builder/"
    - title: "Custom Filter Options"
      url: "https://www.ag-grid.com/archive/36.3.0/angular-data-grid/filter-advanced-custom-filter-options/"
llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt"
---

# Advanced Filter - Filter Model / API

The state of the Advanced Filter can be read as an Advanced Filter Model, and applied again later by setting that model back. This allows the filter to be saved and restored, for example across page reloads or between users, or to be set programmatically without typing an expression.

## Advanced Filter Model

The Advanced Filter model describes the current state of the Advanced Filter. This is represented by an `AdvancedFilterModel`, which is either a `ColumnAdvancedFilterModel` for a single condition, or a `JoinAdvancedFilterModel` for multiple conditions:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filterType` | `'join'` |  |  | 'join' |
| `type` | `'AND' \| 'OR'` |  |  | How the conditions are joined together |
| `conditions` | `AdvancedFilterModel[]` |  |  | The filter conditions that are joined by the `type` |

For example, the following Advanced Filter would be represented by the following model:

`([Age] > 23 OR [Sport] ends with "ing") AND [Country] is any of ["Australia", "Italy"]`

```js
const advancedFilterModel = {
    filterType: 'join',
    type: 'AND',
    conditions: [
      {
        filterType: 'join',
        type: 'OR',
        conditions: [
          {
            filterType: 'number',
            colId: 'age',
            type: 'greaterThan',
            filter: 23,
          },
          {
            filterType: 'text',
            colId: 'sport',
            type: 'endsWith',
            filter: 'ing',
          }
        ]
      },
      {
        filterType: 'set',
        colId: 'country',
        type: 'isAnyOf',
        values: ['Australia', 'Italy'],
      }
    ]
};
```

A condition using a [Custom Filter Option](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/filter-advanced-custom-filter-options/#filter-model) stores the option's `displayKey` in `type`.

## Saving and Restoring the Advanced Filter

The Advanced Filter Model can be retrieved via the API method `getAdvancedFilterModel`, and set via the API method `setAdvancedFilterModel`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getAdvancedFilterModel` | `Function` |  |  | Get the state of the Advanced Filter. Used for saving Advanced Filter state [Module](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/modules/): `AdvancedFilterModule`. |
| `setAdvancedFilterModel` | `Function` |  |  | Set the state of the Advanced Filter or used for restoring Advanced Filter state. If inferring cell data types, and row data is initially empty or yet to be set, the filter model will be applied asynchronously after row data is added. To always perform this synchronously, set `cellDataType = false` on the default column definition, or provide cell data types for every column. [Module](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/modules/): `AdvancedFilterModule`. |

> **Note**
>
> The Advanced Filter Model can be saved and restored as part of [Grid State](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/).

The Advanced Filter Model and API methods are demonstrated in the following example:

- Clicking `Save Advanced Filter Model` will save the current Advanced Filter.
- Clicking `Restore Saved Advanced Filter Model` will restore the previously saved Advanced Filter.
- Clicking `Set Custom Advanced Filter Model` will set `[Gold] >= 1`.
- Clicking `Clear Advanced Filter` will clear the current Advanced Filter.

#### Advanced Filter Model / API

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  GridStateModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import "./styles.css";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  GridStateModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div>
      <div class="button-group">
        <button (click)="saveFilterModel()">Save Advanced Filter Model</button>
        <button (click)="restoreFilterModel()">
          Restore Saved Advanced Filter Model
        </button>
        <button (click)="restoreFromHardCoded()" title="[Gold] >= 1">
          Set Custom Advanced Filter Model
        </button>
        <button (click)="clearFilter()">Clear Advanced Filter</button>
      </div>
    </div>

    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [enableAdvancedFilter]="true"
      [initialState]="initialState"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicData>;

  columnDefs: ColDef[] = [
    { field: "athlete" },
    { field: "country" },
    { field: "sport" },
    { field: "age", minWidth: 100 },
    { field: "gold", minWidth: 100 },
    { field: "silver", minWidth: 100 },
    { field: "bronze", minWidth: 100 },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 180,
    filter: true,
  };
  initialState: GridState = {
    filter: {
      advancedFilterModel: initialAdvancedFilterModel,
    },
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  saveFilterModel() {
    savedFilterModel = this.gridApi.getAdvancedFilterModel();
  }

  restoreFilterModel() {
    this.gridApi.setAdvancedFilterModel(savedFilterModel);
  }

  restoreFromHardCoded() {
    this.gridApi.setAdvancedFilterModel({
      filterType: "number",
      colId: "gold",
      type: "greaterThanOrEqual",
      filter: 1,
    });
  }

  clearFilter() {
    this.gridApi.setAdvancedFilterModel(null);
  }

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridApi = params.api;

    this.http
      .get<IOlympicData[]>(
        "https://www.ag-grid.com/example-assets/olympic-winners.json",
      )
      .subscribe((data) => (this.rowData = data));
  }
}

const initialAdvancedFilterModel: AdvancedFilterModel = {
  filterType: "join",
  type: "AND",
  conditions: [
    {
      filterType: "join",
      type: "OR",
      conditions: [
        {
          filterType: "number",
          colId: "age",
          type: "greaterThan",
          filter: 23,
        },
        {
          filterType: "text",
          colId: "sport",
          type: "endsWith",
          filter: "ing",
        },
      ],
    },
    {
      filterType: "text",
      colId: "country",
      type: "contains",
      filter: "united",
    },
  ],
};
let savedFilterModel: AdvancedFilterModel | null = null;
```

[Live example: Advanced Filter Model / API](https://www.ag-grid.com/archive/36.3.0/examples/filter-advanced-api/advanced-filter-model-api/angular/)