Angular 2 Pipes


Angular 2 Pipes

Angular 2 Pipes are used to transform the data before display in view. Let’s assume we want to display students name in capital letter it’s possible using uppercase Angular 2 Pipe.

To apply any Angular pipe on property we use the | pipe symbol.

List of Angular Pipes are:

  1. uppercase – uppercase used to display given character in capital letter.
  2. lowercase –  lowercase used to display given text in small letter.
  3. date –   used to format the date.
  4. currency –  used to display country currency like in dollar or in rupees.
  5. percent –   used to display percent value.

uppercase pipe:

Used to display text in capital letter.

student.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector:'student',
templateUrl:'./student.html'
})

export class StudentComponent implements OnInit {
   name:any= [];
   constructor() {
     this.name= ['Vikas', 'Vicky', 'Akash', 'Deepak', 'Rakhi'];
   }
   ngOnInit() {}
}

student.html

<table>
<tr>
<td>Student Name:</td>
</tr>
<tr>
<td>
<p *ngFor=”let n of name”>{{ n | uppercase }}</p>
</td>
</tr>
</table>

Output

Student Name:
VIKAS

VICKY

AKASH

DEEPAK

RAKHI

lowercase pipe:

Used to display text in small letter.

<p *ngFor=”let n of name”>{{ n | lowercase }}</p>

currency pipe

Used to display currency symbol before any given number.

Example

student.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector:'student',
  templateUrl:'./student.html'
})

export class StudentComponent implements OnInit {
  money:any= [];
  constructor() {
   this.money=[100, 200, 300];
  }
  ngOnInit() {}
}

student.html

<table>
<tr>
<td>
<p *ngFor=”let m of money”>{{ m | currency:USD }}</p>
</td>
</tr>
</table>

Output

$100.00

$200.00

$300.00






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229