Edupala

Comprehensive Full Stack Development Tutorial: Learn Ionic, Angular, React, React Native, and Node.js with JavaScript

How to implement Angular filter or pipe?

Angular filter

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.

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’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  }}
Angular filter

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

Check articles on the best and latest 2022, and 2021 Angular books to read for your journey from beginner to advanced level. BEST BOOK ON ANGULAR 2022 – 2021

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 filter or pipe?

Leave a Reply

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

Scroll to top