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



Previous
Next Post »