Custom Pipes in Angular

Custom Pipes

We can create our own custom pipes in Angular. We can define any custom pipes with parameters defined which depends on our requirement. Extensibility is an important feature of any application. To define more features in our application, we require to create custom pipes. To create custom pipes in Angular we must know the below things:
  • We should know about the @Pipe decorator. The pipe decorator allows us to specify a pipe name which we will reference in our HTML template to use that particular pipe.
  • To specify a custom pipe, we need to import @Pipe decorator.
  • We can give any value to the custom pipe. It can be array, string, object, etc.

Pipe Decorator

We need to supply a name to our custom pipe. It can be done using @Pipe decorator as below. We will create a pipe named "weekday" which will give us the weekday names based on the number supplied as value. Suppose if we pass the value as 0 then it should give as "Sunday". If we pass 1 then "Monday" and so on. We will implement this pipe now step by step shown:

Step1: Define the name of the custom pipe using @Pipe decorator

import { Pipe} from '@angular/core';
@Pipe({
  name: 'weekday'
})
export class WeekdayPipe {

}
Step2: Register pipe in @NgModule 
Register pipe in the providers array in of the @NgModule.

import { WeekdayPipe } from './weekday.pipe';
@NgModule({
  providers: [
    //...
    WeekdayPipe,
  ],
})
export class AppModule {}
Step3: Implement PipeTransform Interface
To create a custom pipe, the pipe class WeekdayPipe implements PipeTransform interface's transform method. This transform() method will accept a value as input. We can also supply additional optional parameters to this method to have more control over our pipe. This method will return the transformed value. 

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'weekday'
})
export class WeekdayPipe implements PipeTransform{
  transform(value: any, args?: any): any{

  }
}

In the above code, we have implemented the transform() method. The PipeTranform is having the below structure. It has a transform() method which needs to be implemented by our WeekdayPipe class as well. Our class should follow the same structure of the PipeTransform interface to implement the transformation.

export interface PipeTransform {
  transform(value: any, ...args: any[]): any;
}
Step4: Write logic in the transform() method
We will now write our logic using transform() method which will supply value as input and we return the transformed value as output. The transform function has two parameters value and args. The args are optional parameters here. 

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

@Pipe({
  name: 'weekday'
})

export class WeekdayPipe implements PipeTransform {
dayOfWeek =[ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  transform(value: any, args?: any): any {
    if (value > 0 && value <= 6) {
      return this.dayOfWeek[value];
    }
    return "";
  }

}


Step4: Calling pipe in our view 
Now we can call this pipe in our HTML view using the | syntax. We are using interpolation in our HTML to use this custom pipe. 
{{ weekdata.dayIndex | weekday }}

Pipes with arguments

We can argument pipes using the colon(:) symbol in the view. Now we will see an example of a pipe called "thumbnail" pipe which will give us the substring of the passed value depends on the arguments passed as an argument. We are passing the argument as limit here. 

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

@Pipe({
  name: 'thumbnail'
})

export class ThumbnailPipe implements PipeTransform {
    transform(value: any, limit?: any): any {
    if (value) {
      let summaryPoint = (limit) ? limit : 50;
      return value.substring(0,summaryPoint);
    }
    return null;
  }
}

Calling pipe in our HTML view
Using the colon(:) we will supply an argument to pipe "thumbnail" in our example. As we have given the argument as "5" our output will be "There".
In the example, 5 is passed as limit(argument to pipe)

import { Component } from '@angular/core';

@Component({
selector: 'app-custom-pipe-example',
template:`<div>{{ textValue | thumbnail:5}}</div>` 
})
export classCustomPipeExampleComponent {
    textValue = "There are many variations of passages of Lorem Ipsum Dolor site emit 
            available, but the majority have suffered alteration."

Comments