How To Create Inbuilt And Custom Pipes In Angular2
Posted By : Rohit Goyal | 30-Jun-2017
Introduction:
Pipes are used for formatting the data. We need to represent the data in our application in an structured manner. For this
angular2 give its inbuit pipes or we can create the custom pipes in angular2. Let's see how can we use these pipes.
Types:
1) Inbuilt Pipes
2) Custom Pipes
Usage:
1) Inbuilt Pipes:
We have to create a component typescript file first.I am passing static json data for prdouct listing.
Points:
=> We are passing hard coded list of products
=> List of date format available in angular js documentation
=> If you don't specify the date format default format will be taken
=> number filter automatically inserted commas b/w number
=> number filer also takes parmeters
=> number:".3" (roundoff three decimal places)
=> currency by default takes number, so dont use with number.Default is $
=> currency:'INR':true ==> Displays the currency symbol also
=> you can search for ICO country code to get currency for different country.
import { Component } from '@angular/core';
@Component({
selector:'productlist-component',
template:
`
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<h3 align="center">Inbuilt Pipes</h3>
<button class="btn btn-sm btn-default" (click)="changedToIndianCurrency()">Indian Currency</button>
<button class="btn btn-sm btn-default" (click)="changedToUsCurrency()">US Currency</button>
</div>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Product Id</th>
<th>Product Name</th>
<th>Manufacturing Date</th>
<th>Original Price</th>
<th>Discount in %</th>
<th>Discounted price</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products">
<td>{{product.pid}}</td>
<td>{{product.pname | uppercase}}</td>
<td>{{product.mdate | date:'EEEE, dd/MM/yyyy'}}</td>
<td>{{product.price | number:".3"}}, {{product.price | currency:currencycode:true:'.3'}}</td>
<td>{{product.discount | percent}}</td>
<td>{{product.price | dp:product.discount}}</td>
</tr>
</tbody>
</table>
</div>
</div>
})
export class productListComponent{
public currencycode:string = 'INR';
public products=[
{pid:1,pname:"Product1",mdate:new Date(2015,9,14,0,0,0),price:4500,discount:0.5},
{pid:2,pname:"Product2",mdate:new Date(2014,10,15,0,0,0),price:5500000,discount:0.8},
{pid:3,pname:"Product3",mdate:new Date(2013,11,16,0,0,0),price:65000,discount:0.7},
{pid:4,pname:"Product4",mdate:new Date(2012,12,17,0,0,0),price:750,discount:0.6},
];
public changedToIndianCurrency():void{ // Changed to Indian currency functionality
this.currencycode = 'INR';
}
public changedToUsCurrency():void{ // Changed to US Dollar functionality
this.currencycode = 'USD';
}
}
2) Custom Pipes:-
You can also create the custom pipes.Custom filters are used to write our own functionality.In this first argument is
default arguments and we can further arguments seperated by commas.We need to import pipe service to use angular2 pipes.
dp is the pipe name that we are using in component in product.price.You can create your own custom pipe using that.use the
code below.
import { Pipe} from '@angular/core';
@Pipe({
name:'dp'
})
export class discountedPricePipe{
// Inside transform function our filter logic have to be written
public transform(originalprice:number,discount:number):number{
console.log("input is " + originalprice);
console.log("discount is " + discount);
let discountedprice:number =originalprice - (originalprice * discount)
return discountedprice;
}
}
That's it.I think this blog will help you to use custom pipes in angular 2.
If you have any query or concerns.please contact on my skype Id:- rohit.oodles
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.