Angular 7 Pipes

by

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.