Angular Material Table Filter By Columns | Angular 11

Angular Material Table filter by columns is the core feature of the Angular Material table which gives us the flexibility to filter the specific or multiple column( global search) options as per our requirement. In this tutorial, we will create a custom Angular Material Table filter for the table’s values in Angular 11.

 In this use case, we will implement Angular Material Table Filter by Columns( global search) functionality in Angular 11 for which we need some data. here we will also create a function to fetch employee data using the HTTP get method from REST API to display data in Angular Material Table.

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { HttpClient } from '@angular/common/http';
import { IEmployee } from './models/IEmployee';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {

  displayedColumns: string[] = ['name', 'country', 'email', 'address'];
  dataSource = new MatTableDataSource<IEmployee>();

  constructor(private _http: HttpClient) {
  ngOnInit() {
  getEmployeeData() {
    this._http.get<IEmployee[]>("/assets/data/employee.json").subscribe(res => { = res;

In the above code snippets, we have defined the column header name as a string array which will appear as the column header of the Angular material Table 11.

Next, in the below code snippets, we are filtering the angular Material table data by the value of the textbox.

applyFilter(event: Event): void {
    const filter = ( as HTMLInputElement).value.trim().toLocaleLowerCase();
    this.dataSource.filter = filter;
    if (this.dataSource.paginator) {

Next, update the app.component.html template with the below code.

<mat-toolbar color="primary">
  <button mat-icon-button>
  <span>Angular Material Table Filter By Columns Example</span>
  <span class="example-spacer"></span>
<section class="container">
  <mat-form-field  appearance="fill">
    <input matInput placeholder="please enter a value" (input)="applyFilter($event)">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{}} </td>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let element"> {{}} </td>

    <!-- Address Column -->
    <ng-container matColumnDef="address">
      <th mat-header-cell *matHeaderCellDef> address </th>
      <td mat-cell *matCellDef="let element"> {{element.address}} </td>

    <!-- Country Column -->
    <ng-container matColumnDef="country">
      <th mat-header-cell *matHeaderCellDef> Country </th>
      <td mat-cell *matCellDef="let element"> {{}} </td>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

Now, we can check our result of the Angular Table Filter Search:

angular material table filter by columns

Angular Material Table Filterpredicate

Let’s get started and implement Filter on Specific Column with filterPredicate by creating a new function “filterTable()” as below

ngOnInit() {
  filterTable() {
    this.dataSource.filterPredicate = (data: IEmployee, filter: string): boolean => {
      return (

In the above code snippets, the filterPredicate takes the column’s name based on which it filters the table.

As an example, we have just taken the name column, based on if the user type in the search box, it will match only with the value of the column name.

Next, we can check our result of the AngularMaterial Table Filter Search:

Angular Material Table Filterpredicate

We are using material component, we need to register MatTableModule, MatFormFieldModule, MatInputModule, MatIconModule, MatButtonModule, MatToolbarModule, module in the app.module.ts file.

Source code available for download

The source code is available on GitHub for the Angular Material Table Filter By Columns.


  • Post category:Angular
  • Reading time:5 mins read