How to implement Angular filter or pipe?

In our application, we need to transform input data to desired formats in an HTML template, this can be achieved by an Angular filter. Angularjs we have lots of prebuilt Angular filters to perform data transformation. Pipes were initially referred to as a filter in Angular 1. Angular pipes are mainly used for data transformation in HTML templates and with help of pipes, we can convert input data to desired output format in HTML templates. For example, we want to convert the first character of input to a Captial letter.

In this tutorial, we’ll learn how how to implement angular filter and demonstrate an example of how we can create our own custom angular filter or pipe.

Common built-in Angular filter

Angular has lots of built-in Angular filters or pipes and we can use it directly on our Angular template without writing any class or component. Here we will list some of the common Angular filters.

Creating angular custom filter in Angular 11 ?

The angular filter can be classified into prebuilt and custom filters. Angular built-in is used commonly, but sometimes we want a different filter that is not available on the Angular built-in filter. Angular also allows us to create our own custom filter based on our needs.

Example of angular custom filter

In the example below, we’ll learn how to create a custom filter and demonstrate an example of it. We want to convert the first character of data to capital letters. Let’s create an angular project.

ng new angularFilterExample

Once we have created our angular project, and next create a custom Angular pipe by running the following command.

ng generate pipe pipes/capitalizeFirst

By running the above command will capitalizeFirstPipe in app.pipes folder.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'capitalizeFirst' })
export class CapitalizeFirstPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

We can see that the Angular filter has imported Pipe and PipeTransform from the Angular core module. We need to implement the PipeTransform interface, which forces us to have a defined transform() method based on our requirements. In our case, we are transforming the first character to a small letter and let edit the capitalize-first.pipe.ts file.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'capitalizeFirst' })
export class CapitalizeFirstPipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.substring(1).toLowerCase();
  }
}

In our angular filter, transform method, we are converting the first character to capital and remaining to lower case.

Used our Angular custom pipe in our component template

We have created our custom angular filter and are now using it in our component template. For demonstration, let’s add this in the app.component.html template as follow.

{{ 'edUPALA' | capitalizeFirst  }}

The input property value edUPALA is converted to Edupala and we can use a variable instead of a static string.

Conclusion
We have completed our Angular filter or pipe and how easy to create an angular custom pipe. We have demonstrated an example of transforming input string to capitalize string in our app.component.html template.

Related posts

• How to implement Angular search filter on data tables.
• How to calculate base64 image size in Angular
• How to install Angular material
• How to implement CKEditor in Angular
• How to use to implement HighCharts Angular