Built-In And Custom Pipes In Angular

This blog is to demonstrate, how we can use the Built-In & Custom pipes in Angular.

What are Pipes in Angular?

• Pipes in Angular are used to transform the data before displaying to view.
• Angular has some built-In pipes like lowercase, uppercase, date, percent, currency, etc. However, we can also create custom pipes as per our application requirement.
• And to achieve this transformation we use the pipe operator ( | ).

I will show you examples of both Built-In and Custom Pipes.

 

Let's start by creating a component in the application.

 

Execute command
"ng g c CustomPipeDemo"   ( g = generate, c=component ) in your workspace.

 

Navigate to custom-pipe-demo.component.ts file.

 

Update your code as show below,

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

@Component({
  selector: 'app-custom-pipe-demo',
  templateUrl: './custom-pipe-demo.component.html',
  styleUrls: ['./custom-pipe-demo.component.css']
})
export class CustomPipeDemoComponent implements OnInit {

  name:string="Jay";

  salary:number=78000;

  birthday = new Date(1962, 5, 21); // June 21, 1962

  constructor() { }

  ngOnInit() {
  }

}

Basically, we just declared & initialized 3 variables in CustomPipeDemoComponent class - name, salary & birthday.

 

Now, as you can see the templateUrl points to custom-pipe-demo.component.html  so let's navigate to this file and update the code. 

<h3>Angular Pipes Demo</h3>

<h3>Angular Built-In Pipes Demo</h3>

<p>Uppercase - {{name | uppercase}}</p>
<p>Lowercase - {{name | lowercase}}</p>

<p>Currency - {{salary | currency:'INR'}}</p>

<p>Date - {{birthday | date:'dd/MM/yyyy'}}</p>

The code above shows you how we transform the value in using various pipes.

 

Firstly, I have used uppercase & lowercase pipe to display the name in the respective format. Secondly, I have used currency pipe to display the currency symbol before salary. Finally, I have used the date pipe to display the Date in format "DD-MM-  YYYY".

 

Let's see the output with these changes,

  

 

Now, let's see how can we chain the pipes. Chaining pipes means to use multiple pipes together with proper combinations.

 

Add the below code in HTML file and see the output,

<h3>Angular Chained Pipes Demo</h3>

<p>Uppercase Date - {{birthday | date:'dd/MMMM/yyyy' | uppercase}}</p>
<p>Lowercase Date - {{birthday | date:'dd/MMMM/yyyy' | lowercase}}</p>

 

 As you can see above we have used two combinations of pipes - date & uppercase/lowercase respectively. So, the result of these would be a date in the specified format with uppercase/lowercase applied respectively.

 

Let's see the output with updated changes,

 

    

Finally, now let's see the custom pipes.

 

Let's take an example of a leap year. We will input a year in a textbox and display whether this is a leap year or not. Something like as shown below,

 

Let's add this input in our HTML file,

<h3>Angular Custom Pipes Demo</h3>

<input type="text" placeholder="Year" name="txtYear" [(ngModel)]="txtYear"/>

As you can see above we have created a textbox and used [(ngModel)] for binding the text input. Now, using this text input we need to display whether the year is a leap year or not. 

 

Let's create a custom pipe to achieve this.

 

Execute command
"ng g p IsLeapyear"  ( g = generate, p=pipe) in your workspace.

 

Navigate to the is-leap-year.pipe.ts file and update the code as shown below,

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'isLeapYear'
})
export class IsLeapYearPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    if(value==undefined || value == null || value=="")
      return false;

    if(value%4==0)
      return true;
    else
      return false;
  }

}

Basically, pipe implements a PipeTransform interface where we need to implement pipe logic in a transform method.

 

Transform method has 2 parameters and a return type any,

1. Value (For receiving the value we passed to this pipe for transformation)
2. args?  (Optional - For receiving the additional arguments to the value)

Basically, we can change this return type as per our requirement. But for this, I kept it as it is though our program returns boolean. 

 

Now, we need to pass the Year value from HTML &  transform it with Pipe (see the pipe name) to display true/false. So, we will update the HTML code as shown below,

 

Note
isLeapYear is our pipe name. 

Leap Year - {{txtYear | isLeapYear}}

Now, see the output by entering different Year inputs to the text field. You will get the results as shown below,

 

   

That's it! I hope you like this blog. Angular is a really interesting framework to learn and work on.