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}}

WELCOME TO SSLABS

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.

{{5000|currency}}

$5,000.00

{{5000|currency:”₹”}}

₹5,000.000

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}}

à12.346%

{{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

App.component.ts

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

@Component({

selector: ‘app-root’,

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

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

})

export class AppComponent {

title = ‘app’;

emp=[

  {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}

  ];

} 

Age.pipe.ts:-

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

@Pipe({

name: ‘age’

})

export class AgePipe implements PipeTransform {

transform(value: any): any {

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

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

                   vareage=currentYear-edobYear;

returneage;

  }

}

 

App.component.html

 

<div class=”container”>

          <table class=”table”>

                   <tr class=”bg-primary”>

                             <th>S.No</th>

                             <th>Ename</th>

                             <th>Edec</th>

                             <th>Edob</th>

                             <th>Esal</th>

                             <th>Eage</th>

                   </tr>

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

                                      <td>{{i+1}}</td>

                                      <td>{{x.ename|uppercase}}</td>

                                      <td>{{x.edec|lowercase}}</td>

                                      <td>{{x.edob|date}}</td>

                                      <td>{{x.esal|currency:”&#8377;”}}</td>

                                      <td>{{x.edob|age}}</td>

                             </tr>

          </table>

</div>

Please follow and like us:
500

Leave a Reply

Your email address will not be published. Required fields are marked *