Angular Pipes
- In Angular 1 it is called as filters
- From Angular 2 it is called as pipes
- We have many bult-in pipes. We can also create our own pipes
- It is used to convert the format and display in browser.
- It uses “|” character to perform this operation.
- Example, if we want a value to be displayed in uppercase or lowercase or with fixed decimals etc.
- It is declared as @directive
{{ Welcome to Angular 7 | lowercase}}
Below are a few commonly used built in pipes.
- Lowercase
- Uppercase
- Date
- Currency
- Slicepipe
- Decimalpipe
- Jsonpipe
- Percentpipe
You can use these option as below in your app.component.html
<h1>Uppercase Pipe</h1> <b>{{title | uppercase}}</b> <br/> <h1>Lowercase Pipe</h1> <b>{{title | lowercase}}</b> <h1>Currency Pipe</h1> <b>{{6589.23 | currency:"USD"}}</b> <br/> <b>{{6589.23 | currency:"USD":true}}</b> // Boolean true is used to get the sign of the currency. <h1>Date pipe</h1> <b>{{todaydate | date:'d/M/y'}}</b> <br/> <b>{{todaydate | date:'shortTime'}}</b> <h1>Decimal Pipe</h1> <b>{{ 454.78787814 | number: '3.4-4' }}</b> <h1>Json Pipe</h1> <b>{{ jsonval | json }}</b> <h1>Percent Pipe</h1> <b>{{00.54565 | percent}}</b> <h1>Slice Pipe</h1> <b>{{months | slice:2:6}}</b> // here 2 and 6 refers to the start and the end index
Custom Pipe:
To create a new custom pipe, we need to create a new ts file.
To create a custom pipe, we need to import pipe and pipe transform from angular core. We need to add @Pipe directive and add our name. The same name will be used for transformation in html.
We can also do the same using ng cli as below
ng g pipe square
Below screenshot show the output of the command.
We can see square.pipe.ts is created and added to app.module.ts
Square.pipe.ts is created with below code
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'square' }) export class SquarePipe implements PipeTransform { transform(value: unknown, ...args: unknown[]): unknown { return null; } }
We can modify the transform function as below to show the square of a value.
transform(val : number) : number { return val * val; }
We can use this pipe in app.component.html as below
<h1 > {{ 2 | square}} </h1> <h1> {{ 6 | square}} </h1>