What is pipe and how to use

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>

Thanks for reading