Skip to content

Aquent | DEV6

Angular Pipe

Written by: Kevin Wang

1. What is an Angular Pipe?

Pipe is an essential feature of Angular. It’s a simple way of transforming data for display. Most application does what seems like a simple task – get data, transform them and show them to users. Angular Pipe plays an important role in the transform part.

2. Built-in pipes:

There are many built-in pipes such as DatePipe, UpperCasePipe, CurrencyPipe and PercentPipe. They are available out of the box, ready to use, no import statements needed.

You can find all the built-in pipes here: https://angular.io/api?type=pipe.

In this example we are taking a stab at the uppercase pipe and lowercase pipe. You just add the “|” symbol after the name variable and the name of the pipe.

import { Component } from '@angular/core';
 
  
 
@Component({
 
  selector: 'my-app',
 
  template: `
 
     <h1>Hello {{ name }}!</h1>                  <-- no pipe implemented here
 
     <h1>Hello {{ name | uppercase }}!</h1>      <-- transform name to all uppercase
 
     <h1>Hello {{ name | lowercase }}!</h1>      <-- transform name to all lowercase
 
  `
 
})
 
export class AppComponent  {
 
  name = 'Pipe';
 
}

This is the result:

hello pipe

3. Custom pipes

Creating custom pipes is just as easy. Let’s create a reverseString pipe that takes a string and reverses the order of the letters.

  • The main thing is to implement PipeTransform, and add the transform() function. Here’s the code that you need for reverse-string.pipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
 
  
 
@Pipe({name: 'reverseString'})
 
export class ReverseString implements PipeTransform {
 
  transform(value: string): string {
 
    return value.split("").reverse().join("");
 
  }
 
}
  • Then you’ll need to include the custom pipe as a declaration in your app module:
import { ReverseString } from './reverse-string.pipe';
 
  
 
@NgModule({
 
  imports:      [ BrowserModule, FormsModule ],
 
  declarations: [ AppComponent, ReverseString ],
 
  bootstrap:    [ AppComponent ]
 
})
 
export class AppModule { }
  • Finally, in your template, this is how you use the custom pipe you just created:
import { Component } from '@angular/core';
 
  
 
@Component({
 
  selector: 'my-app',
 
  template: `
 
  <h1>Hello {{ name | reverseString}}!</h1>
 
  `
 
})
 
export class AppComponent  {
 
  name = 'Pipe';
 
}
  • Here is the result:
hello epip

4. Pure and Impure Pipes

There are two categories of pipes: pure and impure. The main takeaway here is that a pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. An impure pipe is called for every change detection cycle no matter whether the value or parameters changes. Impure pipes trigger changes and call transform() for everything, if the text box is getting clicked, hovered, focused or blurred. So, impure pipes can be costly, slowing down the app. So implement impure pipe with great care because it could really destroy the user experience. Note pipes are pure by default.

How do you turn a pure pipe to an impure pipe? Just change the pure parameter to false in the pipe decorator.

@Pipe({
 
  name: 'myPipe',
 
  pure: false   // false makes it impure
 
})
 
  
 
export class myPipe implements PipeTransform {
 
  
 
  transform(value: any, args?: any): any {
 
    // your logic here and return the result
 
  }
 
  
 
}

5. Conclusion:

Pipes are a good way to encapsulate and share common display-value transformations. Use them like styles, dropping them into your template’s expressions to enrich the appeal and usability of your views.

REF:

https://angular.io/api?type=pipe

https://angular.io/guide/pipes

Interested in Learning More Angular?

Sign up for our Angular training course

View Course Details