Angular Pipes and built-in pipe in angular

Angular Pipes are features built into angular 2 which basically allows you to transform output in your template. Pipes are functions that we can use in template expression to format input data before it’s rendered. Angular has lots of its own built-in pipes and we can use pipes for synchronous and asynchronous data.

In this tutorial, we’ll learn how to implement angular pipe and demonstrate few example of built-in pipe in Angular and at last we will create our own custom angular pipe.

What is Angular pipes ?

Angular pipes are classes that are used to prepare data for display to the user. 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.

Built-in pipe in Angular

Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data. We can use built-in pipes to transform strings, currency amounts, dates, and other data for display. To check all built-in pipes in Angular check the official documentation link on the pipe.

Common built-in pipe in angular.

Angular has lots of built-in Angular pipes and we can use it directly on our Angular template without writing any class or component.

1. AsyncPipe Currency
2. Pipe DatePipe
3. DecimalPipe
4. I18nPluralPipe
5. I18nSelectPipe
6. JsonPipe
7. KeyValuePipe
8. LowerCasePipe
9. PercentPipe
10. SlicePipe
11. TitleCasePipe
12. UpperCasePipe

Here we will list some of the common Angular pipes.

Example of Angular built-in pipe

In our first example, we will use the lowercase pipe to transform our text into lowercase.

In lowercase: <pre>'{{ 'EdUpALa'| lowercase}}'</pre>

Where lowercase is a built-in pipe and transforms the value of our string to lowercase. The pipe operator ( | ). It is used for the transformation of the expressions. The pipe operator passes the result of the expression on the left to a pipe function on the right.

Currency Pipe
The CurrencyPipe pipe formats a number as a currency input, and convert it to the custom currencies format. Syntax of this pipe with three optional parameters utilizing the following format:

<element>
{{ value_expression | currency [ : currencyCode [ : display [ : digitFormat [ : locale ] ] ] ] }}
</element>

In the example below, we are using a currency pipe to format the amount into an Indian currency format.

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <code ngNonBindable>{{ amount | currency:'USD':'symbol' }} : </code>{{ amount | currency:'USD':'symbol' }}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR' }} : </code>{{ amount | currency:'INR' }}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR':'code' }} : </code> {{ amount | currency:'INR':'code' }}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR':true:'.2'}} : </code> {{ amount | currency:'INR':true:'.2'}}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR': 'symbol-narrow' }} : </code> {{ amount | currency:'INR': 'symbol-narrow' }}
    </div>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  amount = 100000;

  constructor() {
  }

}

Example of angular custom filter or Angular custom pipe

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 the 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;
  }
}

The @Pipe decorator is applied to a class and used to specify a name by which the pipe can be used in a template. 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 now use 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 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