Pipes in angular and creating custom pipe | Akashminds

Akash Chauhan May 22, 2021

 


Angular is a huge framework we can make almost everything possible in the website nowadays, it provides a number of features where we can make thing according to our requirements. 

With angular we can have progressive web apps , server side rendering and other rich functionalities that are really difficult in other platforms now.

Today we are going to focus on pipes in Angular where we can format or transform almost every kind of data or data types. 

Angular itself provides a various types of pipes where it is easy to map dates, currencies, strings etc but what if we have a custom requirement on making an array  ,string and number to be mapped or formatted as we want ?  Now we have custom pipes in the game to make things done. 

First learn how many types of pipe are there.


Types of pipe in angular

There are two types of pipe in angular 


Pure Pipes

When angular finds any change in value or the parameter passed in pipe then it is called pure, when we set pure to true under pipe decorator then it is true.

 Angular pipes are pure by default. we can cache the result of previous value or input when set to true. input properties  should not be mutable in this case. pure pipes look for pure change if the input is changed weather it can be string, number, Boolean, date, array and objects. 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name:'filter',
  pure: true
})
export class FilterPipe implements PipeTransform{
  transform(value: any, name: string) {
    if(name === ''){
      return value;
    }
    return value.filter((user) => user.firstName.startsWith(name));
  }
}


Impure Pipes

Impure pipes are used to trigger any change detection in the app and it does not matter if the value or the parameter is changed. it specifically works with change detection cycle that happens in the app so that it is called impure pipe.
Impure pipes are not re-used pipes. in this case of impure pipes we can not use cache for the previous value. input values can be mutable in this case.
@Pipe({
  name:'filter',
  pure: false
})


Custom pipes in Angular

Custom pipes are used to transform values as per our requirements. Just like DecimalPipe that is provided by Angular where it returns decimal values or we can not transform the value as we need but Angular also provides us a way to customize the value just like we need to show. 

with the help of custom pipes we can do that. we can almost transform any kind of value that can be a string, number, Boolean etc.

Steps to create custom pipe in angular

  1. Give a meaningful name for custom pipe.
  2. create a file with extension (.pipe.ts) e.g. custom.pipe.ts
  3. Import Pipe and PipeTransform from @angular/core.
  4. Add a Class named CustomPipe.
  5. Add a decorator named pipe e.g. @pipe({})
  6. The custom pipe class should implement PipeTransform interface.
  7. now implement pipe transform method that accepts value agrument.
  8. Add this pipe to the module you want to use the pipe in component of e.g. app.module.ts file.
  9. add pipe in the declaration
  10. now use the custom pipe in interpolation e.g. {{ name | 'custom' }}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'SquarePipe'
})
export class SqaureNumPipe implements PipeTransform {
    transform(value: number) {
        return value * value
    }
}
Declare it in app.module.ts 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SquareNumPipe } from './square-num.pipe';
@NgModule({
    declarations: [
        AppComponent,
        SquareNumPipe
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Finally we are ready to use our custom pipe that returns the square of input value 
{{ inputValue | SquarePipe }}

Summary 

 In this article, we focused on what are pipes their types and how we can create our own custom pipe in angular. 
There are many advantages of pipes like we can create a custom pipe to transform a value and then it can be used in all components of that module, other than that pipes are awesome they are light weighted and including pipes in the app are often great approach. If you like the article consider subscribing. Have a nice day!

Tags

Post a Comment

0 Comments