Angular 7 Pipes

The filters in Angular 1 are called Pipes onwards Angular 2. The pipe in Angular 7 is used to transform data and is denoted by | symbol. Integers, strings, arrays, and date can be taken as the input of Pipe, each separated with |. The data is transformed in the desired format and is displayed the same in the browser.

Syntax 1:

{{title | uppercase}}

Syntax 2:

 {{ title | lowercase }}

Example: component.ts file:

import { Component } from '@angular/core';  
 
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = ‘Angular-7';  
}

component.html file:

<h2>  
   {{ title | uppercase }} <br/></h2>  
<h2>  
  {{ title | lowercase }} <br/></h2>

Output:

Explanation:

In the above example, we are using pipes to display the title text in the upper and lower case. Here, a variable named “title” is defined in component.ts file.

Angular 7 Built-in Pipes:

The built-in pipes of Angular 7 are listed below:

Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe

Example: component.ts file:

import { Component } from '@angular/core';  
 
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'my-app';  
  today = new Date();  
  val = {name: 'Tom', age: '30', country:{c1: 'India', c2: 'USA'}};  
  month = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',  
    'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];  
}

component.html file:

<div style = "width:100%;">
 <div style = "border:solid 2px red;">
   <h3>Uppercase Pipe</h3>
   <b>{{title | uppercase}}</b><br/>
   <h3>Lowercase Pipe</h3>
   <b>{{title | lowercase}}</b>
   <h3>Currency Pipe</h3>
   <b>{{400.00 | currency:"USD"}}</b><br/>
   <b>{{500.08 | currency:"USD":true}}</b>
   <h3>Date pipe</h3>
   <b>{{today | date:'d/M/y'}}</b><br/>
   <b>{{today | date:'shortTime'}}</b>
   <h3>Decimal Pipe</h3>
   <b>{{ 123456.7890 | number: '3.4-4' }}</b>
   <h3>Json Pipe</h3>
   <b>{{ val | json }}</b>
   <h3>Percent Pipe</h3>
   <b>{{00.1234 | percent}}</b>
   <h3>Slice Pipe</h3>
   <b>{{month | slice:3:8}}</b>
 </div>
</div>

Output:

Explanation:

In the above example, we first defined the required variables in component.ts file. The various built-in pipe symbols are then used in the component.html file. The output thus displayed all the eight built-in pipes of Angular 7, i.e, Lowercasepipe, Uppercasepipe, Datepipe, Currencypipe, Jsonpipe, Percentpipe, Decimalpipe and Slicepipe.

To create a custom pipe:

A custom pipe is the one created by the developer itself, other than the already existing built-in pipes, to use it in a certain code. To create a custom pipe, a new ts file is created with the required code. The Pipe and PipeTransform are imported from the Angular/Core.

Example: component.ts file:

import {Pipe, PipeTransform} from '@angular/core';  
@Pipe ({  
  name : 'sqrt'  
})  
export class SqrtPipe implements PipeTransform {  
  transform(value : number) : number {  
    return Math.sqrt(value);  
  }  
}

Module.ts file:

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { AppComponent } from './app.component';  
import { NewCmpComponent } from './new-cmp/new-cmp.component';  
import { ChangeTextDirective } from './change-text.directive';  
import { SqrtPipe } from './app.sqrt';  
@NgModule({  
   declarations: [  
      SqrtPipe,  
      AppComponent,  
      NewCmpComponent,  
      ChangeTextDirective  
   ],  
   imports: [  
      BrowserModule  
   ],  
   providers: [],  
   bootstrap: [AppComponent]  
})  
export class AppModule { }

component.html file:

<h2>Square root of</h3>  
<h3>225 is: {{225 | sqrt}}</h3><br/>  
<h3>484 is: {{484 | sqrt}}</h3>

Output:

Explanation:

In the above example, we are creating a sqrt custom pipe. Here, we created a class named SqrtPipe to implement the PipeTransform. The argument of the transform method defined in the class will be a number. The number after taking the square root will be returned in the output. As we have created a new file, we made the required changes in the app.module.ts to add the same file in app.module.ts. The sqrt pipe is then used in the component.html file.

Please follow and like us: