Angular Pipes: How to Use Pipes in Angular 12

By Krunal Last updated Aug 27, 2021 2

The pipes in Angular are a simple way to transform values in the template. The pipe takes in a value or values and then returns a value. Angular comes with the stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrentcyPipe, and PercentPipe, and they are all available for use in any angular template.

What is Angular Pipes

Angular Pipes takes the integers, strings, arrays, and dates as input separated with | to be converted in the format as required and display the same in a browser.

Inside the interpolation expression, we can define the pipe and use it based on the situation as there are many types of pipes we can use in an Angular application. The Pipes are a useful feature. The pipes are the way to write display-value transformations that you can declare in your HTML component.

Angular Pipes were earlier called filters in AngularJS and called pipes from Angular 2 onwards. The pipe takes the data as input and transforms it into the desired output.

Built-in Angular pipes

Angular doesn’t have the FilterPipe or an OrderByPipe.

Angular doesn’t provide the pipes for filtering or sorting lists because they perform poorly and prevent aggressive minification.

They both filter and order require parameters that reference object properties.

Pipes are a great way to encapsulate and share a common display-value transformation.

AsyncPipe
CurrencyPipe
DatePipe
DecimalPipe
JsonPipe
PercentPipe
LowerCasePipe
UpperCasePipe
SlicePipe
TitleCasePipe

Angular pipes example

Let us install a brand new Angular project by typing the following command.

Now, let us use the Date pipe in Angular.

So write the following code inside the app.component.ts file.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  birthday = new Date(1993, 8, 10);
}

Remember, the month is starting from 0. So January is 0 and so on.

Now, let us write the following code inside the app.component.html file.

<!-- app.component.html -->

<div style="text-align:center">
  <h1>
    Krunal's birthdate is {{ birthday | date }}
  </h1>

<router-outlet></router-outlet>

So, here, we have used the DatePipe to display the date property in the date format.

Parameterizing the pipe in Angular

We can also pass a parameter to the pipe. You can write the HTML code like this to pass the parameter.

<!-- app.component.html -->

<h1>
    Krunal's birthdate is {{ birthday | date:"dd/MM/yyyy" }}
</h1>

Save the file, and you can see inside the browser that the page has a different date format as defined here.

Chaining pipes

We can chain pipes together and create useful combinations. For example, we can use the uppercase or lowercase pipe in our example.

<!-- app.component.html -->

<h1>
    Krunal's birthdate is {{ birthday | date | uppercase }}
</h1>

Now, your date is in uppercase letters.

Pure and impure pipes

There are two categories of pipes:

1) pure

2) impure.

By default, the pipes in Angular are Pure. Every pipe you have seen so far has been pure like built-in pipes. You can make the pipe impure by setting the pure flag to false.

Pure pipes

Angular executes the pure pipe only when it detects the absolute change to an input value. The pure change is either changing the primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

Impure pipes

Angular executes the contaminated pipe during every component change detection cycle. Thus, the impure pipe is called often, as often as every keystroke or mouse-move.

How to Create a Custom Angular Pipe?

You can write your custom pipes. Let us create a new pipe inside the app folder called the power.pipe.ts file.

Add the following code inside it.

// power.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'power'
})
export class PowerPipe implements PipeTransform {
   transform(base: number, exponent: number): number {
      return Math.pow(base, exponent);
   }
}

PowerPipe is responsible for returns the base to the exponent power, that is, base^exponent.

Now, we can call this pipe inside the app.component.html file like this.

<div style="text-align:center">
  <h1>
    {{2 | power: 5}}
  </h1>
</div>
<router-outlet></router-outlet>

The pipe is a class that is decorated with pipe metadata.
An Angular pipe class implements the PipeTransform interface’s transform() method that accepts an input value followed by optional parameters and returns the transformed value. In our case, we have taken the two parameters.
In our example, there is one additional argument to the transform method for each parameter passed to the pipe. Our pipe has one such parameter: the exponent.
To tell Angular that this is the pipe, you apply the @Pipe decorator, which you import from the Angular core library.
The @Pipe decorator allows us to define the pipe name that you can use within the template expressions. Of course, it must be a valid JavaScript identifier.

Finally, the Angular Pipes Example is over. Thanks for taking it.