Angular Pipes Example | Angular 6/7/8/9 Pipes Tutorial

By Krunal Last updated Mar 18, 2020

Angular Pipes are a useful feature. The pipes are a simple way to transform values in an Angular 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.

Angular Pipes Example

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.

Angular pipes are the way to write display-value transformations that you can declare in your HTML component.

Angular 8 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

Example

Let us install a brand new Angular 8 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 8

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 in and create useful combinations. 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 in the change to 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. 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 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. It must be the valid JavaScript identifier.

Finally, Angular 8 Pipes Tutorial With Example is over. Thanks for taking it.