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 any example of it. We want to convert the first character of data to capital letters. Let creat an angular project.

ng new angularFilterExample

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

ng generate pipe pipes/capitalizeFirst

By running 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 Angular filter havee import Pipe and PipeTransform from Angular core module. We need to implement the PipeTransform interface, which forces us to have a define transform() method based on our requirement. In our case we are transforming first charater to small letter and let edit 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