What are Pipes in Angular 4

Angular 4 Pipes Tutorial

Angular 4 Pipes Tutorial

Angular 4 Video Tutorials

Pipes are a way to convert, filter or transform one data to another format. For example you can use a pipe to convert all your strings to uppercase, Earlier in Angular 1.x the same function was there under filter.

Angular 2 and Angular 4 they come with built in pipes, a variety to use without writing any extra code, you can also create your own pipes to use them later in you code.

Using Pipes

Pipes symbols is '|' and it can be use by following the below syntax:

<h1>My name is {{name | uppercase}}</h1>

In above example the name string will be transformed to all uppercase.

Examples for built-in pipes

 

Uppercase pipe

app.component.ts

name = 'Dana Melik' ;

app.component.html

<h1>My daughter name is {{name | uppercase}}</h1>

The output will be DANA MELIK although it was defined as 'Dana Melik'. This was done without creating any new function or pipe as it's a built-in pipe which comes with Angular 4.

 

Lowercase pipe

app.component.html

<h1>My daughter name is {{name | lowercase}}</h1>

Above example will produce all lowercase.

 

Currency pipe

app.component.ts

pprice= '234.25' ;

app.component.html

<h1>{{pprice | currency: 'USD'}}</h1>

 

Percent pipe

app.component.ts

score = 10/40 ;

app.component.html

<h1>{{score | percent }}</h1>

 

Date pipe

Date pipe will output the date in a human readable format.

app.component.ts

tDate = new Date() ; // This will create new date with the current day and time

app.component.html

Below will show only the date without the current time.

<h1>Today is: {{tDate | date}}</h1>

 

Date pipe optional parameters

You can pass along with the pipe optional parameters to customize the date output.

Syntax: date : "MM/dd/yy"

This will output the date in Month/Day/Year format.

<h1>Today is: {{tDate | date: "MM/dd/yy"}}</h1>

Syntax: date : "MM/dd/yy hh:mm"

I added here hh:mm for showing the current time in hours and minutes.

<h1>Today is: {{tDate | date: "MM/dd/yy hh:mm"}}</h1>

Other examples:

<h1>Today is: {{tDate | date: 'shortDate'}}</h1>
<h1>Today is: {{tDate | date: 'fullDate'}}</h1>

 

Combining and Chaining Pipes

You can also combine several pipes together, having the date in readable format and yet capital can be achieved by using 'date' and 'uppercase'.

Example:

<h1>Today is: {{tDate | date | uppercase}}</h1>

 


Subscribe to
for video tutorials updates