How to Create Multi-Field Data Filters in Angular

How to Create Multi-Field Data Filters in Angular

A tutorial on how to use Angular to create data filters that take multiple user inputs, and then use HTML to display the results of your TypeScript code.

A tutorial on how to use Angular to create data filters that take multiple user inputs, and then use HTML to display the results of your TypeScript code.

1. Creating a New Project

Let’s create a new project

ng new angular-data-filters
cd angular-data-filters

We also need to install a Bootstrap.

npm install bootstrap

To make it work in an Angular project, we need to add:


inside the style section of the Angular.json file.

2. Creating a Filter Pipe

We need to create a filter pipe in the first place. The pipe is a simple way to transform values in an Angular** **template.

ng generate pipe filter

After adding a couple of lines, we get our pipe to look like this:

import { Pipe, PipeTransform } from '@angular/core';
    name: 'filter',
export class FilterPipe implements PipeTransform {
    transform(items: any[], value: string, prop: string): any[] {
        if (!items) return [];
        if (!value) return items;
        return items.filter(singleItem =>

It’s important to note that if all fields are empty the data should not be filtered.

3. Creating a Search Component

To get started, use the below command:

ng generate component search

Let’s create a simple form that will include inputs for the first name, last name, job title, gender, and age from and age to fields. The last two fields will be used to create an age range.

export class SearchComponent implements OnInit {
    form: FormGroup;
    @Output() autoSearch: EventEmitter<string> = new EventEmitter<string>();
    @Output() groupFilters: EventEmitter<any> = new EventEmitter<any>();
    searchText: string = '';
    constructor(private fb: FormBuilder,
    private userService: UserService) {}
    ngOnInit(): void {
    buildForm(): void {
        this.form ={
            firstName: new FormControl(''),
            lastName: new FormControl(''),
            jobTitle: new FormControl(''),
            gender: new FormControl(''),
            agefrom: new FormControl(''),
            ageto: new FormControl('')
<form novalidate
<h3>Group Filter</h3>
<div class="row">
    <div class="col-md-3">
        <input type="text"
        placeholder="First Name"
    <div class="col-md-3">
        <input type="text"
        placeholder="Last Name"
    <div class="col-md-3">
        <input type="text"
        formControlName="Job Title"
        placeholder="Job Title"
    <div class="col-md-3 col-sm-3">
        <select class="form-control"
            <option value="">Gender</option>
            <option value="M">male</option>
            <option value="F">female</option>
    <div class="col-md-3">
        <input type="text"
        placeholder="age from"
    <div class="col-md-3">
        <input type="text"
        placeholder="age to"
    <div class="col-md-3 col-sm-3">
        <button class="btn btn-primary"

You might notice from the above code that we didn’t use a template-driven form which is provided by Angular. In this tutorial, we used reactive forms. Now it’s time to add a code block for the search component in the TS file.

The last part for this component is implementing the search function:

search(filters: any): void {
    Object.keys(filters).forEach(key => filters[key] === '' ? delete filters[key] : key);

4. Building a User-List Component

To begin, enter the following command:

ng generate component user-list

We will do it in the same way as we did for the search component, but, before that, we need data which will be fetched and displayed on the page. We are going to use JSON data that will add in the separate file and fetch it via a user service that will create with the following command.

ng generate service user

Here is where Angular observables com ein to solve our problem.

export class UserService {
    setGroupFilter$ = new Subject<any>();
    getGroupFilter = this.setGroupFilter$.asObservable();
    constructor() {}
    fetchUsers(): Observable<any> {
        return of(USERS);

After making changes inside user service we can start working on the User-list component (UserListComponent).

export class UserListComponent implements OnChanges {
    @Input() groupFilters: Object;
    @Input() searchByKeyword: string;
    users: any[] = [];
    filteredUsers: any[] = [];
    constructor(private userService: UserService,
    private ref: ChangeDetectorRef) { }
    ngOnInit(): void {
    ngOnChanges(): void {
        if (this.groupFilters) this.filterUserList(this.groupFilters, this.users);
    filterUserList(filters: any, users: any): void {
        this.filteredUsers = this.users; 
        const keys = Object.keys(filters);
        const filterUser = user => {
            let result = => {
                if (!~key.indexOf('age')) {
                    if(user[key]) {
                        return String(user[key]).toLowerCase().startsWith(String(filters[key]).toLowerCase())
                    } else {
                        return false;
            result = result.filter(it => it !== undefined);
            if (filters['ageto'] && filters['agefrom']) {
                if (user['age']) {
                    if (+user['age'] >= +filters['agefrom'] && +user['age'] <= +filters['ageto']) {
                    } else {
                    } else {
            return result.reduce((acc, cur: any) => { return acc & cur }, 1)
        this.filteredUsers = this.users.filter(filterUser);
        loadUsers(): void {
            .subscribe(users => this.users = users);
            this.filteredUsers = this.filteredUsers.length > 0 ? this.filteredUsers : this.users;

In the above code, we include event emitters in the search component and also get the data from the user service. Then we implement a user data filtering feature based on options like the age range or gender and by other filters as well. The most important thing is that you can type in both uppercase and lowercase and it will work in both cases. Sometimes you might notice issues connected with character type in the other examples.

So we need to create a simple HTML table for displaying the data.

<table class="table table-responsive">
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
        <tr *ngFor="let user of filteredUsers | filter: searchByKeyword: 'name'">
            <td>{{ user.firstName}}</td>
            <td>{{ user.lastName}}</td>
            <td>{{ user.gender}}</td>
            <td>{{ user.jobTitle}}</td>
            <td>{{ user.age}}</td>

We have done a lot of work so far. Don’t worry, there's just a few steps left.

5. Creating a User Component

To start, use the below command:

ng generate component user

You might think, 'what’s the point of adding user components if there is already a user-list component included?'

User components will be a container for our search and user-list components.

<div class="container">
<h1>List of Users</h1>
<app-search (groupFilters)="filters = $event"></app-search>
<app-user-list [groupFilters]="filters"

Also, don't forget about user-routing.module.ts and user.module.ts

While it's a general Angular topic, you can choose your desired way to make the above components work together. However, for this tutorial, this approach was used:

import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';
const routes: Routes = [
  { path: '', component: UserComponent }
export const UserRoutes = RouterModule.forChild(routes);
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserComponent } from './user.component';
import { SearchComponent } from '../search/search.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserService } from '../../services/user.service';
import { FilterPipe } from '../../pipe/filter.pipe';
import { UserRoutes } from './user-routing.module';
  imports:      [ CommonModule, FormsModule, ReactiveFormsModule, UserRoutes ],
  declarations: [ UserComponent, SearchComponent, UserListComponent, FilterPipe ],
  providers: [ UserService ]
export class UserModule { }

You can keep this two files inside the user folder.

For the full working example you can visit here: GitHub

angular web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer?, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.