Angular defines various Pipes API lists – That is called Inbuilt Pipes.
1) DatePipe
2) CurrencyPipe
3) AsyncPipe
4) DecimalPipe
5) PercentPipe
9) JsonPipe
10) SlicePipe
11) I18nSelectPipe
12) And many more
Similarly, you can also create a custom pipe (as per your needs) and configure in a module that is globally available in across angular apps.
Angular DatePipe -
The DatePipe is used to format a date with the help of locale rules.
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
The Example for date pipe –
The full date provides you full date for the date. The short date converts the date to a short date and the long date provides you long date for the date.
<h3>{{TodayDate}}</h3>
<h3>{{TodayDate | date:'shortDate'}}</h3>
<h3>{{TodayDate | date:'longDate'}}</h3>
<h3>{{TodayDate | date:'fullDate'}}</h3>
Angular CurrencyPipe –
The CurrencyPipe is used to format a currency with help of locale rules.
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
The CurrencyPipe formats a number as a currency of a specific country. It takes country currency type as a parameter.
The example for the currency pipe –
<tr>
<td>{{employee.salary | currency}}</td>
<td>{{employee.salary | currency : 'INR'}}</td>
<td>{{employee.salary | currency : 'INR' : true : '6.2'}}</td>
</tr>
Angular AsyncPipe –
Angular provide a special kind of pipe that are called AsyncPipe and the AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted.
The AsyncPipe allows you to bind your HTML templates directly to values that arrive asynchronously manner that is a great ability for the promises and observables.
The expression with Async pipe-
{{ obj_expression | async }}
OR
<ul><li *ngFor="let account of accounts | async">{{account.ACNo }}</li></ul>
The object expression can be observable, promise, null, or undefined.
The example for AsyncPipe -
@Component({
selector: 'app-async-pipe',
template:`<ul><li *ngFor="let account of accounts | async"> A/C No- {{account.ACNo }} </li></ul>`,
styleUrls: ['./async-pipe.component.css']
})
export class AsyncPipeComponent implements OnInit {
accounts = [];//accounts declarations
apiURL: string = 'https://api.github.com/anilsingh/accounts/'; //fetching json data from Rest API
//AsyncPipe Component constructor
constructor(private accountService: AccountService) { }
//Load the account list
ngOnInit() {
this.accountService.getAccount(this.apiURL)
.subscribe(data => this.accounts = data);
}
}
Angular PercentPipe -
Angular provides a PercentPipe and it is used to format a number as a percentage according to below rules.
The expression rule with percent -
{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}
The input value to be formatted as a percentage and it can be any type.
The digitsInfo is optional string parameters and by default is undefined.
The locale is optional string parameters and by default is undefined.
The example as,
<h2>Result- {{marks | percent}}</h2>
<!-- output result is - '98%'-->
Angular LowerCasePipe -
Angular provides a LowerCasePipe and it is used to transforms given a text to lowercase.
The expression with lowercase -
{{ value_expression | lowercase }}
The example as,
import { Component } from '@angular/core';
@Component({
selector: 'lowercase-pipe',
template: `<div>
<input type="text" #name (keyup)="changeLowerCase(name.value)">
<p>LowerCase - <h2>'{{value | lowercase}}'</h2>
</div>`
})
export class LowerCasePipeComponent {
value: string;
changeLowerCase(value: string) {
this.value = value;
}
}
Angular UpperCasePipe –
Angular provides an UpperCasePipe and it is used to transforms given a text to uppercase.
The expression with uppercase -
{{ value_expression | uppercase }}
The example as,
import { Component } from '@angular/core';
@Component({
selector: 'uppercase-pipe',
template: `<div>
<input type="text" #name (keyup)="changeUpperCase(name.value)">
<p>UpperCase - <h2>'{{value | uppercase}}'</h2>
</div>`
})
export class UpperCasePipeComponent {
value: string;
changeUpperCase(value: string) {
this.value = value;
}
}
Angular TitleCasePipe –
The TitleCasePipe is used to converts the text (string type data) in which the first alphabet of each word is made capital latter and the rest will be in the small case letter.
The expression with titlecase -
{{ value_expression | titlecase }}
The example as,
import { Component } from '@angular/core';
@Component({
selector: 'titlecase-pipe',
template: `<div>
<input type="text" #name (keyup)="changetitlecase(name.value)">
<p>titlecase - <h2>'{{value | titlecase}}'</h2>
</div>`
})
export class titlecasePipeComponent {
value: string;
changetitlecase(value: string) {
this.value = value;
}
}
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|