What is pipe and how to use:-
- angular pipes can be used to transform data into the desired output .
- The type takes in a data incident to transform data into a different output.
- using the pipe operator(|), we can apply pipes features To any of the property in our angular project.
- Pipes (|) in angular are used to transform the data before displaying it in a browser. angular provides a lot of built-in pipes translate the data before displaying it into the browser and as we know, angular lets us extend its feature, we can even create a custom pipe in angular.
Syntaxes:-
{{‘Test’ | uppercase}} => TEST
Basic Pipes:-
Most of the pipes provided by Angular 8 will be familiar with us if we already worked in the previous Angular version.- Currency
- Date
- Uppercase
- Lowercase
- JSON
- Decimal
- Percent
- Async
How to use Pipe:-
app.component.ts
import { Component, OnInit } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls : ['./custom.css']
})
export class AppComponent implements OnInit {
public todayDate: Date;
public amount: number;
public message: string;
constructor() { }
ngOnInit(): void {
this.todayDate = new Date();
this.amount = 100;
}
}
app.component.html
<div>
<h1>Demonstrate of Pipe in Angular 8</h1>
<h2>Date Pipes</h2>
Full Date : {{todayDate}}<br />
Short Date : {{todayDate | date:'shortDate'}}<br />
Medium Date : {{todayDate | date:'mediumDate'}}<br />
Full Date : {{todayDate | date:'fullDate'}}<br />
Time : {{todayDate | date:'HH:MM'}}<br />
Time : {{todayDate | date:'hh:mm:ss a'}}<br />
Time : {{todayDate | date:'hh:mm:ss p'}}<br />
<h2>Currency Pipes</h2>
No Formatting : {{amount}}<br />
USD Doller($) : {{amount |currency:'USD':true}}<br />
USD Doller : {{amount |currency:'USD':false}}<br />
INR() : {{amount |currency:'INR':true}}<br />
INR : {{amount |currency:'INR':false}}<br />
</div>
ConversionConversion EmoticonEmoticon