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

About Gadgets Teach

Er. Brijesh Kumar who in a vocation spreading over more than 8 years has worked intimately with innovation announcing for probably the most regarded marks in the media area. Er. Brijesh Kumar has been included with the site since its beginning, and in November 2019, did the unbelievable, by purchasing out the site from its past promoters.