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 pipe, 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.

Filter NameDescriptionSyntaxOutput
lowercaseConvert the data input value to all lowercase.{{ PropertyInputvalue | lowercase }}
example {{ ‘EDUPALA’ | lowercase }}
edupala
uppercaseConvert the data input value to all uppercase.{{ PropertyInputvalue | uppercase }}
example {{ ‘Edupala’ | lowercase }}
EDUPALA
currencyAdd currency symbol at starting of value. Value of currency can be USD, EUR, CAD, and more{{ 1234.56 | currency:’INR’ }}₹1,234.56
sliceThis filter will slice a piece of data from the input string by specifying starting and end values.Slice from 0 – 7 {{ ‘edupala.com’ | slice:0:7 }}edupala
dateConvert the input string to date format.{{ date1 | date: ‘shortTime’ }}
{{ date1 | date: ‘dd/MMM/yyyy’ }}
{{ newdate | date: ‘fullDate’ }}
2:15 PM
08/Sep/2021
Wednesday, September 8, 2021

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 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 requirement. 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 coverting first character to capital and remaning to lower case.

Used our Angular custom pipe in our component template

We have created our custom angular filter, now used it in our component template. For demonstration, let add this in app.component.html template as follow.

{{ 'edUPALA' | capitalizeFirst  }}
Angular filter

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

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

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top