WEB DEVELOPER SITE
PYTHONJAVA
TUTORIALS
 

Angular 7 Pipes


In Angular 1, filters are utilized which are later called Pipes onwards Angular2. In Angular 7, it is known as pipe and used to change data. Angular Pipes were earlier called filters in AngularJS and called pipes from Angular 7 onwards. It is denoted by symbol |

Syntax:

  1. {{title | uppercase}}   

Angular ise Pipes takes the arrays, strings, integers, and dates as information isolated with | to be changed over in the configuration as required and show same in a browser.

Angular 7 Built-in Pipes

In Angular 7 , Pipes are the great way to encapsulate and share a common display-value transformation.

  • Jsonpipe
  • Percentpipe
  • Datepipe
  • Currencypipe
  • Decimalpipe
  • Slicepipe
  • Lowercasepipe
  • Uppercasepipe

Example:

Define the required variables in component.ts file.

component.ts file:

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'my-first-app';  
  10.   todaydate = new Date();  
  11.   jsonval = {name: 'Alex', age: '25', address:{a1: 'Paris', a2: 'France'}};  
  12.   months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',  
  13.     'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];  
  14. }  

Use the different built-in pipe symbols in component.html file:

Pure and impure pipes

There are two categories of pipes: 

1) pure 

2) impure

By default, the pipes in Angular are Pure. Every pipe you have seen so far has been pure like built-in pipes. You can make the pipe impure by setting the pure flag to false.

How to create a custom pipe?

You can write your custom pipes. Let us create new pipe inside the app folder called power.pipe.ts file.

Add the following code inside it.

// power.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'power'
})
export class PowerPipe implements PipeTransform {
   transform(base: number, exponent: number): number {
      return Math.pow(base, exponent);
   }
}
PowerPipe is responsible for returns the base to the exponent power, that is, baseexponent.