December 7, 2019

Create a custom Angular Pipe with Parameter

Custom-Angular-Pipe-with-Parameter

In this tutorial we are going to create a custom angular pipe and see how they can be useful in transforming the data on the template. There are different pipes for different type of template output and we can create a one of our own depending on the requirement.

Create the Angular Pipe file using CLI

Use the command ng generate pipe custom-pipe to create the boilerplate code for the pipe. Notice in the code below that the class must implement the PipeTransform interface which resides in ‘@angular/core’ and its transform method.

Angular-CLI-command-to-generate-custom-pipe

It also has a decorator named @Pipe which specifies the name which will be used to apply the pipe.

The transform method except some parameter first of which is mandatory and is the value on which the pipe transformation needs to be applied. Any parameters which you need to pass are the additional parameters here.

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

@Pipe({
  name: 'demopipe'
})
export class DemopipePipe implements PipeTransform {

  transform(value: any): any {
    return null;
  }

}

The method return a new string or the modified string post the custom operation performed on it. Here we are going to trim the content and return just first 30 charters of it. And then in the next step we will add a parameters which allows us to select the character count to return.

Also Read: Routing in Angular 8

Now let us update our transform method to get the sub string.

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

@Pipe({
  name: 'demopipe'
})
export class DemopipePipe implements PipeTransform {

   transform(value: any): any {
   return (value as string).substr(0,30) + "...";
  }

}

Use the Angular Pipe

In the app.component.html file let us now add a long paragraph text and use our demopipe.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  longText = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate eaque dolore nostrum, quibusdam deleniti maiores sunt! Ea suscipit, voluptas modi tempore similique ex est magnam esse praesentium excepturi in quos a ducimus deleniti deseruntad voluptatum porro illo corporis nostrum dignissimos vitae provident illum! Dolorum exercitationem eligendi tenetur impedit voluptatem!"

  title = 'custompipe-demo';
}
<div>
    <p> {{ longText | demopipe }}
    </p>
</div>

We will use the built in substr method to get the first 30 characters and just add three dots “…” in the end.

Pass Parameter to Custom Pipe

Let us now give the capability to our pipe to accept the length of sub-string we want it to return. We do this by adding a parameter named length in our custom pipe and then passing the desired value post “:” in the html component.

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

@Pipe({
  name: 'demopipe'
})
export class DemopipePipe implements PipeTransform {

   transform(value: any, length: number): any {
     if(value.length > length)
          return (value as string).substr(0,length) + "...";
     else
          return value;
  }

}
<div>
    <p> {{ longText }}
    </p>
</div>

<div>
    <p> {{ longText | demopipe : 10 }}
    </p>
</div>

Now we can check the browser to see the difference with and without the angular pipe.

Custom-Pipe-Demo

You can refer the official documentation to know more about the built in pipes in angular.

2 thoughts on “Create a custom Angular Pipe with Parameter

Leave a Reply

Your email address will not be published. Required fields are marked *