Pipes In Angular 5

Introduction

In this article, we will be discussing Pipes in Angular 5. Pipes are the operators that are used to format the data in Angular. This comes from the symbol (|) used to do this operation. Pipes are there in Angular from Angular v2 onwards. But it has evolved over the period of time. There are many inbuilt pipes available in Angular 5 and it gives an easy template to create your own pipe using @angular/cli.

Newbies to Angular 5 should check Hello world with Angular5 before moving to this topic.

All the built-in pipes are available in @angular/common npm package under CommonModule.

Inbuilt Pipes in Angular5

Before jumping into the custom pipes in Angular, let's first discuss the inbuilt pipes of Angular.

String pipes

UpperCase	Converts the string type data to upper case in the UI.
lowercase	Converts the string type data to lower case in the UI.
titlecase	Converts the string type data in which the first alphabet of each word is made capital and the rest will be in the small case.
Slice : <starting index>	It works on string fields or Array. It slices the input from the index till the end of the string or array length.
Slice : <starting index>:<end index>	It works on string fields or array. It slices the input from the starting index to the end index. (excluding the end index)

Code for the same:

HTML part

<h2>string pipes</h2>
<h3>{{authorPosition | uppercase}} : {{authorName}}</h3>
<h3>Article Name : {{articleName | titlecase}}</h3>
<br>
<h4>slice demo</h4>
<h4>{{articleName | slice :5 }}</h4>
<h4>{{articleName | slice :5:8 }}</h4>

Typescript part

this.authorPosition = "blogger";
this.authorName = "Biswabid";
this.articleName = "pipes in angular";

output

Date pipes

There are many date type pipes available in Angular. Following are some of the important ones.

shortDate	It converts the date to a short date.
longDate	It provides the long date for the date. Provides full month name then day and year.
fullDate	It provides the full date for the date. i.e day, month date, year

Please find the list of date pipes here.

Code for the same,

HTML part

<h2>Date pipes</h2>
<h3>{{currentDate}}</h3>
<h3>{{currentDate | date:'shortDate'}}</h3>
<h3>{{currentDate | date:'longDate'}}</h3>
<h3>{{currentDate | date:'fullDate'}}</h3>

TypeScript part

this.currentDate = new Date();

output

Other pipes

Let’s talk about some more handy pipes available in Angular5.

Currency	Formats a number as currency.
Currency : <currency type of country>	Formats a number as a currency of the specific country. It takes country currency type as a parameter.
DeprecatedCurrencyPipe	Formats a number as currency to a specific decimal format.

Code for the same,

<td>{{credit.salary | currency}}</td>
<td>{{credit.salary | currency : 'INR'}}</td>
<td>{{credit.salary | currency : 'INR' : true : '8.2'}}</td>

Output

Explanation

As you can observe the 1^st salary column in USD.

As I pass the currency type (INR) as a parameter for the 2^nd column, the output type is formatted to INR.

In the 3^rd scenario, I wanted the data in a specific way i.e. 8 characters before decimal and 2 characters after the decimal. In the output 2, 0s are appended before the number.

Custom pipes in Angular 5

There are times in development you will need to create a pipe of your own to accommodate your specific requirement. For that Angular provides custom Pipe option. It’s really very easy to generate a custom Pipe using @Angular/Cli.

Following is the command you can use in the terminal(in Visual studio code) to generate your custom Pipe.

ng generate pipe [name]

Above is the screenshot for the same command execution.

Once I executed the command, it created a spec.ts and pipe.ts files in my Pipes folder.

It updated the app.module.ts file automatically to add the related dependencies.

Following is the generated code in title.pipe.ts file.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'title'
})
export class TitlePipe implements PipeTransform {
transform(value: any, args?: any): any {
return null;
}
}

And below is the updated code in app.module.ts file.

import { TitlePipe } from './Pipes/title.pipe';

Angular will automatically append Pipe after the name you have used to generate.

Here in the title.pipe.ts implements the PipeTransform class so it’s having an auto-generated function transform in it.

Let’s modify it get the title of a person. If the person is male then it would append Mr. else, Miss. To the name of a person.

Title.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'title'
})
export class TitlePipe implements PipeTransform {
transform(value: any, gender : string): any {
if (gender == 'male'){
return "Mr." + value;
}
else{
return "Miss." + value;
}
}
}

I have modified the transform function. It takes the gender of the person as an argument. It checks if the gender is male, then returns the name appending Mr. or Miss.

Component.html

<table border= "1px solid black">
<thead>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>Date of joining</th>
</thead>
<tbody>
<tr *ngFor='let credit of credits; let i = index'>
<td>{{credit.name | title : credit.gender}}</td>
<td>{{credit.gender}}</td>
<td>{{credit.salary | currency}}</td>
<td>{{credit.DOJ | date:'shortDate'}}</td>
</tr>
</tbody>
</table>

Here, I am creating a table and using custom Title pipe on name column. I am passing credit.gender as argument to the transform function.

Apart from that, I am using currency pipe on salary and date pipe on DOJ column in the table.

Component.ts

interface Icredit{
name : string;
gender : string;
salary : number;
DOJ : Date;
}
export class AboutComponent implements OnInit {
credits : Icredit[];
authorPosition : string;
authorName : string;
articleName : string;
currentDate : Date;
constructor() {
this.credits = [];
this.authorPosition = "blogger";
this.authorName = "Biswabid";
this.articleName = "pipes in angular";
this.currentDate = new Date();
this.credits[0] = <Icredit>{name:"John",gender:"male",salary:1000000, DOJ : new Date("02/01/2015")};
this.credits[1] = <Icredit>{name:"Julli",gender:"female",salary:10000, DOJ : new Date("02/31/2016")};
this.credits[2] = <Icredit>{name:"Jack",gender:"male",salary:90000, DOJ : new Date("05/08/2016")};
this.credits[3] = <Icredit>{name:"Jasmin",gender:"female",salary:80000, DOJ : new Date("04/09/2018")};
this.credits[4] = <Icredit>{name:"Joe",gender:"male",salary:95000, DOJ : new Date("07/12/2015")};
}
ngOnInit() {
}
}

I have created an interface named ICredit. I am creating an array and populating 5 items in it in the constructor().

Output

References

Please let me know your feedback/comments. Happy Coding!!

3 Comments

Join the conversation! Your thoughts help the community grow.

Sagar Pandurang Kap8y ago
Nice article.What is the main use of pipes?
- Biswabid Rath8y ago
  Pipes are used to format the data in the UI....but as I can see the output images are not placed properly by the editor...I am trying to get it fixed in the article.
- Anil Singh8y ago
  Sometimes, the data is not displays in the well format on the HTML templates that time where using pipes. for example, if you want to display the credit card number on your web app - you can't display the whole number on web - you should write the custom logic using the pipe for display the XXXX--XXXX--3829. I hope you understand. Thank you.