Angular Filter Pipe - How To Use It (The Simple Guide)

Angular used to have a filter pipe.

The filter pipe could filter and transform data directly within the templates.

It was most commonly used with an *ngFor directive. Or the new @for syntax in Angular.

However, somewhere this filter pipe got deprecated and dropped.

So, today I'm going to show you how to use an Angular filter pipe, even though it doesn't exist as part of the framework anymore.

How to start using an Angular filter pipe

The first step is to install the ngx-pipes package.

This package has all kinds of Angular filter pipes and too many bells and whistles to describe in this article.

So, to get started, here's the command you'll execute to install this package.

npm install ngx-pipes --save 

The next step is to import the new package into our Angular module file.

If you're using Angular stand-alone components then you'll import it in the imports section.

In my case, I'm using the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgArrayPipesModule } from 'ngx-pipes';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NgArrayPipesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And now that we've got our Angular filter package installed and imported, let's look at 2 common filtering scenarios in an Angular project.

How to Filter By Property Value

The "filter" pipe can be used to filter an array of objects based on a specific property value.

For example, consider a list of products where you want to display only the products with a certain category.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  products = [
    {
      category: "Electronics",
      name: "Pixel 5"
    },
    {
      category: "Food",
      name: "Doritoes"
    }
  ]
}

And our template.

<div *ngFor="let product of products | filterBy: ['category']: ['Electronics']">
  {{ product.name }}
</div>

In this case, only the first product will be shown.

How to Do Dynamic Filtering with Input

The "filter" pipe can work seamlessly with user input to perform dynamic filtering. For instance, you can create an input box where users can search for products by name:

<input type="text" [(ngModel)]="searchTerm" placeholder="Search products" />
<div *ngFor="let product of people | filterBy: ['name']: this.searchTerm">
  {{ product.name }}
</div>

And then inside our Typescript file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  searchTerm = "";
  people = [
    {
      age: 54,
      salary: 4000,
      name: "John Doe"
    },
    {
      age: 32,
      salary: 4000,
      name: "Alice Mary"
    }
  ]
}

As the user types the list of people will dynamically change with the help of the filter pipe.

Conclusion:

And that, my friend, is how to use an Angular filter pipe.

If you have an questions or comment's don't hesitate to reach out.

Till later,

Credits

• Illustration by Icons 8 from Ouch!