What is pipe in Angular?

Pipes are used to transfer the data from one format to another.

For example:- If you want to change the string from lower case to upper case or upper case to lower case, we can use pipe. Pipes accept string, integers, date and array as input and denoted by ' | ' symbol.

It transform the data in another format as per the requirement and display the same data.

Place the following code in .ts file :-

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

@Component({

  selector: 'app-angular-pipe',

  templateUrl: './angular-pipe.component.html',

  styleUrls: ['./angular-pipe.component.css']

})

export class AngularPipeComponent {

title = "This is Angular pipe"

}

Now, place the following code in .html file :-

<h1>{{title}}</h1>

<h1>{{title | uppercase}}</h1>

<h1>{{title | lowercase}}</h1>

If you want to change the date format.

Write this code in .ts file :-

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

@Component({

  selector: 'app-angular-pipe',

  templateUrl: './angular-pipe.component.html',

  styleUrls: ['./angular-pipe.component.css']

})

export class AngularPipeComponent {

today = Date();

}

and the following code in .html file :-

<h1>{{today}}</h1>

<h1>{{today | date : 'fullDate' }}</h1>

This is the following output.

Angular uses some inbuilt pipes. These are following :

• UpperCasePipe
• LowerCasePipe
• CurrencyPipe
• DatePipe
• DecimalPipe
• PercentPipe
• SlicePipe
• AsyncPipe
• JsonPipe