Introduction to Angular pipes

What are Angular pipes (‘|’)? 

Angular Pipes can be used to change the content of the format,

It could not change the content. And pipes represent with the pipe symbol ‘|’.

Using Pipes

Taking data as input and pipes give output in the desired way.

Built-in Pipes

We have a different type of built-in Pipes, They are:

  • Uppercase Pipe
  • Lowercase Pile
  • Currency Pipe
  • Date Pipe
  • Json Pipe
  • Percent Pipe
  • Slice Pipe

And we can create custom pipes also. The above built-in pipes are available in any template.

Uppercase Pipe:-

This uppercase pipe coverts all data into uppercase. 

{{ “ welcome to  sslabs”|uppercase}}


Lowercase Pipe:-

This lowercase pipe coverts all data into lowercase. 

{{“Welcome to SSlabs”|lowercase}}

welcome to sslabs

Currency Pipe:-

This currency pipe converts number into currency string.





Date Pipe:-

Changes a date value according to locale rules.

{{today|date}} // today from app.component.ts

Oct 10,2018

We have more date formats :-

  • ‘short’: equivalent to ‘M/d/yy, h:mm a (6/15/15, 9:03 AM).
  • ‘medium’: equivalent to ‘MMM d, y, h:mm:ss a (Jun 15, 2015, 9:03:01 AM).
  • ‘long’: equivalent to ‘MMMM d, y, h:mm:ss a z’ (June 15, 2015 at 9:03:01 AM GMT+1).
  • full: equivalent to ‘EEEE, MMMM d, y, h:mm:ss a zzzz’ (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
  • ‘shortDate’: equivalent to ‘M/d/yy’ (6/15/15).
  • ‘mediumDate’: equivalent to ‘MMM d, y’ (Jun 15, 2015).
  • ‘longDate’: equivalent to ‘MMMM d, y’ (June 15, 2015).
  • ‘fullDate’: equivalent to ‘EEEE, MMMM d, y’ (Monday, June 15, 2015).
  • ‘shortTime’: equivalent to ‘h:mm a (9:03 AM).
  • ‘mediumTime’: equivalent to ‘h:mm:ss a (9:03:01 AM).
  • ‘longTime’: equivalent to ‘h:mm:ss a z’ (9:03:01 AM GMT+1).
  • ‘fullTime’: equivalent to ‘h:mm:ss a zzzz’ (9:03:01 AM GMT+01:00).

Json Pipe:-

This Json pipecConverts a value into its JSON-format representation. It is useful for debugging

First, we declared a JSON data in app.component.ts

{{ emp|json}}

Percent Pipe:-

This Percent Pipe transforms a number to a percentage string

{{0.123456 | percent}}


{{0.123456 | percent : ‘2.1-2’}}

  • 35%

Slice Pipe:-

This returns a slice of an array. The first argument is the start index of the slice and the second argument is the end index.

{{ [1,2,3,4,5,6]  | slice : 1:3 }}

  • 2,3

{{ [1,2,3,4,5,6]  | slice :2 }}

  • 3,4,5,6


Creating Custom Pipes:-

nggenerate pipe age

Am going to create a Json data in app,component.ts


import { Component } from ‘@angular/core’;


selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’]


export class AppComponent {

title = ‘app’;


  {ename:”siddu”,edec:”developer”,edob:new Date(“10/10/1989”),esal:5000},

  {ename:”shravan”,edec:”mean”,edob:new Date(“02/05/1988”),esal:8000},

  {ename:”raju”,edec:”admin”,edob:new Date(“03/17/1992”),esal:6000}




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


name: ‘age’


export class AgePipe implements PipeTransform {

transform(value: any): any {

          varcurrentYear=new Date().getFullYear();//2018

          varedobYear=new Date(value).getFullYear();








<div class=”container”>

          <table class=”table”>

                   <tr class=”bg-primary”>








                   <tr *ngFor=”let x of emp;index as i”>











Courses to learn :

javascript training in hyderabad

angular js training in hyderabad

Leave a Reply