There are multiple pipes available in Angular 8 by default. here we will be looking into some of the pipes used for formating string, date, and numbers.
- LowerCasePipe
- UpperCasePipe
- TitlecasePipe
- PercentPipe
- CurrencyPipe
- DatePipe
- DecimalPipe
- JsonPipe
- SlicePipe
- AsyncPipe
Lowercase and uppercase Pipe – convert string into lowercase or uppercase
// In .ts file
public name="Amey Raut"
//In HTML File
<h2> {{ name | lowercase }}</h2>
<h2> {{ name | uppercase}}</h2>
// Will display :
// amey raut
// AMEY RAUT
titlecase pipe, PercentPipe and CurrencyPipe
titlecase Title case convert all first letter capital
percent convert number in to percentage (between 0 to1 ) eg. 0.24 will be 24%
currency pipe adds the currency symbol to the number. To change the currency you can specify the ISO currency code, to display code instate of symbol you can use the code keyword
https://www.iban.com/currency-codes
<h2> {{ "this is a message" | titlecase }}</h2>
<h2> {{ 0.22| percent }}</h2>
<h2> {{ 22 | currency }}</h2>
<h2> {{ 22 | currency:'EUR' }}</h2>
<h2> {{ 22 | currency:'EUR':'code' }}</h2>
OUTPUT:
This Is A Message
22%
$22
€22
EUR22.00
Decimal Pipe | “number”
number pipe can be used to show fractions
<h2>{{ 23.545 | number:'3.1'}}</h2>
<h2>{{ 23.545 | number:'3.1-2'}}</h2>
OUTPUT
023.545
023.55
Slice Pipe
<h2> {{ "ameyraut" | slice:2:4 }}</h2>
OUTPUT
ey
Date pipe
date can be formatted in multiple ways using date pipe
- ‘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)
<h2>{{ myDate | date}}</h2>
<h2>{{ myDate | date:'short'}}</h2>
<h2>{{ myDate | date:'shortDate'}}</h2>
<h2>{{ myDate | date:'shortTime'}}</h2>
---------------------------------------
<h2>{{ myDate | date:'MM/dd/yy'}}</h2>
<h2>{{ myDate | date:'dd/MM/yyyy'}}</h2>
OUTPUT
Oct 5, 2020
10/5/20, 10:02 AM
10/5/20
10:02 AM
-------------------------
10/05/20
05/10/2020
import { Component, OnInit, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-child', template: ` <h2> {{ name | lowercase }}</h2> <h2> {{ name | uppercase }}</h2> <h2> {{ message | titlecase }}</h2> <h2> {{ 0.22| percent }}</h2> <h2> {{ 22 | currency }}</h2> <h2> {{ 22 | currency:'EUR' }}</h2> <h2> {{ 22 | currency:'EUR':'code' }}</h2> <h2> {{ "ameyraut" | slice:2:4 }}</h2> <h2>{{ 23.545 | number:'3.1'}}</h2> <h2>{{ 23.545 | number:'3.1-2'}}</h2> <h2>{{ myDate | date}}</h2> <h2>{{ myDate | date:'short'}}</h2> <h2>{{ myDate | date:'shortDate'}}</h2> <h2>{{ myDate | date:'shortTime'}}</h2> <h2>{{ myDate | date:'MM/dd/yy'}}</h2> <h2>{{ myDate | date:'dd/MM/yyyy'}}</h2> `, styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { public name = "Amey Raut"; public message ="This is a message."; public myNumber:number = 23.545; public myDate = new Date(); constructor() { } ngOnInit() { } }