Figure 1. Angular - Search Table by Column Filter
This article represents concepts and code samples in relation to filtering or searching table by one or more column data when working with Angular (Angular 2.*, Angular 4.* Angular 5.*). One can achieve the search/filter table by column functionality by creating custom pipes. Although Angular recommends it by handling the logic in services, one can always create custom pipes as shown in this article.
The following topic is discussed later in this article:
The details on creating custom pipes can be read from this page, Angular Pipes.
Unlike AngularJS, Angular 2.* and later versions such as Angular 4.* and Angular 5.* have not provided out-of-box support for search and orderby filter. In AngularJS, for searching or filtering, the filter was used and for sorting, orderBy was used.
Angular newer released decided not to support these filters out-of-box. Filtering and sorting led to a severe impact on the user experience for even moderate-sized lists when Angular calls these pipe methods many times per second. That often led many to say that AngularJS has poor performance.
As a best practice, the Angular team recommends handling filter and orderBy by handling logic within services rather than pipes. Read further on this page, Angular Pipes
In the code below, a table consisting of teachers’ information is searched by teacher name. The table is filtered by column “Full Name”. In screenshot given below, based on text entered in “Search By Name” field, matching rows are displayed.
Figure 1. Angular – Search Table by Column Filter
The following steps can be used to create a search filter for filtering table by specific column:
Create a custom pipe using following code. Notice some of the following:
Save the custom pipe in the file such as search-by-name.pipe.ts.
import { Pipe, PipeTransform } from '@angular/core'; import { Teacher } from './teacher'; @Pipe({ name: 'searchByName' }) export class SearchByNamePipe implements PipeTransform { transform(teachers: Teacher[], searchText: string) { return teachers.filter(teacher => teacher.name.indexOf(searchText) !== -1); } }
Include Custom Pipe in the Module
The code below represents the import of custom pipe, SearchByNamePipe.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { SearchByNamePipe } from './search-by-name.pipe'; @NgModule({ declarations: [ AppComponent, SearchByNamePipe ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Modify Component and Related View for Search Field
import { Component } from '@angular/core'; import {Teacher} from './teacher'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tutosphere'; searchText = ''; id = 1; teacher = new Teacher(0, '', '', '', 0); TEACHERS = [ new Teacher(this.id, 'Adarsh', 'Physics', 'Wilmington', 8764562341) ]; addTeacher() { this.id += 1; const teacherEntry = new Teacher(this.id, this.teacher.name, this.teacher.subject, this.teacher.address, this.teacher.mobile); this.TEACHERS.push(teacherEntry); this.resetTeacher(); } deleteTeacher(id: number) { for (let i = this.TEACHERS.length - 1; i >= 0; i--) { if (this.TEACHERS[i].id === id) { this.TEACHERS.splice(i, 1); } } } resetTeacher() { this.teacher.name = ''; this.teacher.subject = ''; this.teacher.address = ''; this.teacher.mobile = 0; } }
<input type="text" id="searchTextId" [(ngModel)]="searchText" name="searchText" placeholder="Search By Name">
For detailed code on app.component.ts and app.component.html, take a look at this page, Add/Remove Table Row.
The code below represents how the pipe is applied to TEACHERS array.
<tr *ngFor="let teacher of (TEACHERS | searchByName: searchText)"> <td>{{teacher.name}}</td> <td>{{teacher.subject}}</td> <td>{{teacher.address}}</td> <td>{{teacher.mobile}}</td> <td><button type="button" class="btn btn-secondary btn-sm" (click)="deleteTeacher(teacher.id)">Delete</button></td> </tr> Latest posts by Ajitesh Kumar (see all)
- Large Language Models (LLMs): Four Critical Modeling Stages - August 4, 2025
- Agentic Workflow Design Patterns Explained with Examples - August 3, 2025
- What is Data Strategy? - August 2, 2025
Large language models (LLMs) have fundamentally transformed our digital landscape, powering everything from chatbots and…
As Large Language Models (LLMs) evolve into autonomous agents, understanding agentic workflow design patterns has…
In today's data-driven business landscape, organizations are constantly seeking ways to harness the power of…
In this blog, you would get to know the essential mathematical topics you need to…
This blog represents a list of questions you can ask when thinking like a product…
AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…
View Comments
Great post. helped me a ton! You do have a typo in your search-by-name.pipe.ts:
"return teachers.filter(teacher =>"
should be "return teachers.filter(teacher =>"