Mastering Advanced Filtering in Angular Grid Interfaces with Ignite UI 

Filtering is a core feature of any data grid, playing a critical role in helping users quickly and efficiently find and work with relevant data. As datasets grow in size and complexity, users need more than just simple text searches. This is where Ignite UI for Angular and the Grid component come into play. It provides a robust filtering API that supports everything from basic operations to advanced, customizable logic, handling various filtering scenarios (such as advanced filtering, programmatic filtering, and others) with ease. 

Here’s what this post will cover to help you understand how it all works and explore key advanced filtering techniques for complex Grid interfaces: 

• Excel-style filtering 

• Custom filtering operands  

• Custom filtering strategies 

• Advanced filtering 

• Programmatic filtering 

• Remote filtering 

Working with Excel-Style Filtering 

Excel-style filtering introduces familiar UI paradigms to Angular applications, enabling users to apply quick, column-based filters with ease. 

What Are Some of the Most Common Use Cases? 

• Quick filtering on a single column. 

• Multiple filter conditions per column. 

• Clear UI for non-technical users. 

This filtering mode is straightforward to implement and is useful in applications that require simple yet interactive filtering interfaces. 

How to Enable Excel-Style Filtering?

Set [allowFiltering] to true and [filterMode] to 'excelStyleFilter': 
<igx-grid [data]="data" 
          [allowFiltering]="true" 
          [filterMode]="'excelStyleFilter'"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Additional columns --> 
</igx-grid>

Custom Filtering Operands

Built-in operands, such as Contains or Equals, cover common scenarios, but when your application requires domain-specific logic, custom operands provide the flexibility to extend the filtering framework. 

What Are Some of the Most Common Use Cases? 

• Enforce domain-specific filtering rules. 

• Implement flexible matching logic. 

• Support structured or non-standard data formats. 

Example: Regex Match Operand 

This custom filtering operand enables users to apply regular expressions for filtering. For example, the regex ^\s*\S+\s+\S+\s+\S+\s+\S+\s*$ filters product names containing exactly four words. 

export class ExtendedStringFilteringOperand extends IgxStringFilteringOperand { 
  constructor() { 
    super(); 
    this.operations = [ 
      ...this.operations, // Keep default string operations 
      { 
        name: 'Regex Match', 
        iconName: 'search', 
        isUnary: false, 
        logic: (target: string, searchVal: string) => { 
          try { 
            const regex = new RegExp(searchVal); 
            return regex.test(target); 
          } catch (e) { 
            console.error('Invalid regex pattern:', e); 
            return false; 
          } 
        } 
      } 
    ]; 
  } 
}

Usage in Ignite UI for Angular Grid 

public extendedStringFilteringOperand = ExtendedStringFilteringOperand.instance(); 
<igx-column field="productName" 
            header="Product Name" 
            dataType="string" 
            [filters]="extendedStringFilteringOperand"> 
</igx-column>

Useful Custom Filtering Strategies to Try

Basic filtering works well for straightforward scenarios. However, when your application needs to clean up input, support fuzzy logic, or apply different rules per column, a custom filtering strategy offers the flexibility you need. 

With a strategy in place, you control exactly how the grid evaluates each value against the filter conditions. 

What Are Some of the Most Common Use Cases? 

• The input or data must be transformed first, such as removing accents, extracting numbers, or simplifying text. 

• Matching involves tokens, partial phrases, or fuzzy logic that go beyond simple operands. 

• Different columns require unique filtering behaviors based on data type or business logic. 

Example: Initials Matching Strategy 

This strategy filters data by transforming each value into its initials (e.g., “John Doe” → “jd”) and matching them against the filter condition.

export class InitialsFilteringStrategy extends FilteringStrategy { 
  public override filter(data: [], expressionsTree: IFilteringExpressionsTree): any[] { 
    const result: any[] = []; 
    if (!expressionsTree || !expressionsTree.filteringOperands || 
        expressionsTree.filteringOperands.length === 0 || !data.length) { 
      return data; 
    } 
    data.forEach((rec: any) => { 
      if (this.matchRecord(rec, expressionsTree)) { 
        result.push(rec); 
      } 
    }); 
    return result; 
  } 
  public override findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean { 
    const initials = this.getFieldValue(rec, expr.fieldName, isDate, isTime, grid) 
          .split(/\s+/) 
          .map(word => word[0]?.toLowerCase()) 
          .join(''); 
    return expr.condition?.logic?.(initials, expr.searchVal, expr.ignoreCase) ?? false; 
  } 
}

Note: To create a custom filtering strategy, you can either implement the IFilteringStrategy interface or extend the FilteringStrategy base class provided by the library. 

Advanced Filtering  

For complex data exploration needs, IgxGrid offers an Advanced Filtering UI. This feature allows users to build multi-condition queries across multiple columns using a dialog interface that supports nested logical expressions (AND, OR). 

What Are Some of the Most Common Use Cases?  

• Apply filtering conditions across multiple columns to isolate precise data sets. 

• Ideal for applications where non-technical users need to construct complex queries without code. 

• Handle advanced scenarios requiring nested AND / OR logic to define relationships between filters. 

• Seamlessly supports strings, numbers, dates, and custom types, making it suitable for diverse datasets. 

• Perfect for data-heavy UIs where deep filtering and user-friendly interfaces are both essential. 

This feature supports both internal and external filtering dialogs and seamlessly integrates with grid APIs, making it ideal for advanced Angular applications where filtering is not just a UI concern but a core part of the data access strategy 

How to Enable Advanced Filtering? 

There are two options for getting started with Advanced Filtering. 

Option 1: Internal Advanced Filtering 

Enable advanced filtering directly on the grid: 

<igx-grid [data]="data" [allowAdvancedFiltering]="true"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Other columns --> 
</igx-grid>

This adds an “Advanced Filtering” option to the grid’s UI menu. 

Option 2: External Advanced Filtering Dialog 

You can also control the dialog externally using the igx-advanced-filtering-dialog component: 

<igx-advanced-filtering-dialog [grid]="grid1"></igx-advanced-filtering-dialog> 
<igx-grid #grid1 [data]="data"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Other columns --> 
</igx-grid>

 This setup gives you more control over when and how the dialog is shown. 

Programmatically Building Advanced Filtering Expressions 

In many applications, filtering isn’t always triggered by direct user input. You might need to apply filters dynamically based on saved views, user roles, business logic, or external inputs. 

IgxGrid supports this with a flexible API that lets you create and apply filtering rules programmatically. 

Core Concepts 

• FilteringExpression: Represents a single condition (e.g., status = ‘Active’) 

• FilteringExpressionsTree: Groups expressions using logical operators (AND, OR) to form complex queries 

Example: Building a Filter Tree 

public applyFiltering(department: string): void { 
  const today = new Date(); 
  const threeYearsAgo = new Date(today.getFullYear() - 3, today.getMonth(), today.getDate()); 
  const departmentAvgSalary = this.calculateAverageSalaryPerDepartment(department); 
  // Department filter: Department === specified value 
  const deptExpr: IFilteringExpression = { 
    fieldName: 'Department', 
    searchVal: department, 
    condition: IgxStringFilteringOperand.instance().condition('equals'), 
  }; 
  // Tenure filter: HireDate before 3 years ago 
  const tenureExpr: IFilteringExpression = { 
    fieldName: 'HireDate', 
    searchVal: threeYearsAgo, 
    condition: IgxDateFilteringOperand.instance().condition('before'), 
  }; 
  // Salary filter: GrossSalary within ±5% of department average 
  const salaryMinExpr: IFilteringExpression = { 
    fieldName: 'GrossSalary', 
    searchVal: departmentAvgSalary * 0.95, 
    condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), 
  }; 
  const salaryMaxExpr: IFilteringExpression = { 
    fieldName: 'GrossSalary', 
    searchVal: departmentAvgSalary * 1.05, 
    condition: IgxNumberFilteringOperand.instance().condition('lessThanOrEqualTo'), 
  }; 
  // Combine salary range conditions with OR 
  const salaryExprTree = new FilteringExpressionsTree(FilteringLogic.Or); 
  salaryExprTree.filteringOperands.push(salaryMinExpr, salaryMaxExpr); 
  // Build main AND tree with all filters 
  const mainExprTree = new FilteringExpressionsTree(FilteringLogic.And); 
  mainExprTree.filteringOperands.push(deptExpr, tenureExpr, salaryExprTree); 
  // Apply filters to the grid 
  this.treeGrid.advancedFilteringExpressionsTree = mainExprTree; 
}

This example demonstrates how to programmatically build filters to show employees from the ‘Technology’ department, hired at least 3 years ago, whose gross salaries are within ±5% of their department’s average. 

What Are Some of the Benefits? 

• Full control over filtering behavior. 

• Easily integrate with user settings or saved filters. 

• Compatible with the advanced filtering UI (filters applied programmatically can be edited via UI). 

This approach is ideal when filters must be auto-applied based on context, or showing department-specific data to certain users, or pre-filtering based on a dashboard selection. 

Remote Filtering 

When working with large datasets, client-side filtering may not be efficient or scalable. In such cases, IgxGrid supports remote filtering, where the filter expressions are constructed on the client and sent to the server for processing. 

This approach is ideal for virtualized grids, paged APIs, or scenarios where backend systems perform the heavy lifting. 

What Are Some of the Most Common Use Cases? 

• Virtualized grids with server-side paging. 

• Dashboards that require querying large datasets. 

• Ensuring filters are enforced server-side for security or data privacy. 

How Does It Work 

1. Users interact with IgxGrid’s filtering UI. 

2. The grid builds a FilteringExpressionsTree representing active filters. 

3. You serialize this filter tree and include it in API requests. 

4. Your server processes the filters and returns matching data. 

Example: Generate Filter Query for Your API 

private buildFilterQuery(): string { 
  const expressionsTree = this.grid.filteringExpressionsTree; 
  if (!expressionsTree || expressionsTree.filteringOperands.length === 0) { 
    return ''; 
  } 
  const filterParts: string[] = []; 
  expressionsTree.filteringOperands.forEach((expr: IFilteringExpression) => { 
    const field = expr.fieldName; 
    const condition = expr.condition.name; 
    const value = encodeURIComponent(expr.searchVal); 
    filterParts.push(`${field} ${condition} ${value}`); 
  }); 
  return filterParts.join(' or '); 
} 
private buildDataUrl(): string { 
  const filterQuery = this.buildFilterQuery(); 
  const baseUrl = 'https://myapi.example.com/employees'; 
  return filterQuery ? `${baseUrl}?$filter=${filterQuery}` : baseUrl; 
}

Usage 

const apiUrl = this.buildDataUrl(); 
this.http.get(apiUrl).subscribe((data) => { 
  this.grid.data = data; 
}); 

//Generated URL example 
https://services.odata.org/V4/Northwind/Northwind.svc/Products?$filter=UnitPrice gt 50 and UnitsInStock gt 10

Useful Backend Integration Tip

Ensure your server can interpret and apply the filter logic. Depending on your backend technology, you might: 

• Map operators (e.g., contains, equals) to SQL or NoSQL equivalents. 

• Parse nested AND/OR groups from the FilteringExpressionsTree. 

• Apply type-aware filtering (e.g., strings, numbers, dates). 

Wrap Up 

To get the most out of IgxGrid’s filtering capabilities, explore the Ignite UI for Angular documentation, check out our Grid Samples to see filtering features in action, and feel free to experiment with combining formatted filtering and custom operands for a highly tailored UX. 

With these tools, you can build enterprise-grade data experiences that empower users to explore, analyze, and act on their data more efficiently and with greater insight.