Angular Custom Pipes
In this tutorial, we shall see, how to create custom pipes in angular and reuse them throughout the application.
What are Pipes?
Pipes in angular are used to transform the representation of any given value. In many cases we simply need to transform the value to another form. For example, if we want to convert a string to an uppercase then we can use built-in uppercase pipe to transform the data to uppercase. Similarly, if we need to transform the date into particular format then we use date pipe to transform into particular format.
But in some scenario, we need to transform our data to different format which cannot be done by default pipes provided by angular. In such cases, we need to go for creating a custom pipe to handle the scenario.
Creating a custom pipe
In this article lets create a pipe
that would show only 10 characters and then remaining characters will be removed and appended with ...
notation.
Let's create a pipe using the below angular cli command.
ng g p ellipse
The command will create a pipe and register the pipe in app.module.ts
. Now open the ellipse pipe and modify the code as below
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'ellipse'
})
export class EllipsePipe implements PipeTransform {
maxLength = 10;
transform(value: string): string {
let resultString = value;
if (resultString.length > this.maxLength) {
resultString = resultString.substr(0, this.maxLength);
resultString += '...';
}
return resultString;
}
}
Any class that is decorated with @Pipe()
will act as pipe
. The name of the pipe as ellipse
.
The PipeTransform
is an interface which will implement the transform()
function. The first parameter of the transform()
function has a parameter which receives the value to which the pipe has been applied. It can be a string or number or object or an array.
Since we are dealing with string we had specified the type of value as string
. The pipe will be returning the transformed result which will be of type string
.
Inside the transform()
function we assign the value to resultString
and then perform logical operation to the resultString
variable. If the string length of resultString
is less than 10, then we return the resultString
.
If the value of resultString
is greater than 10, then we take the first 10 characters of resultString
variable using substr()
function and append ...
to resultString
and return the resultString
.
Use Custom pipe in Component
To use this pipe to an element we open any component say, app.component.html
file and paste the following code.
<p>{{ 'Welcome to Readers Buddy.' | ellipse}}</p>
Here |
represents pipe symbol and ellipse
is the name of the pipe. This will display the result as
Welcome to...
Custom pipe with dynamic value
Suppose, if we need to specify the length to be considered dynamically, that is also possible with pipes. Pipes
can dynamically get any number of parameters using colon symbol.
Next, modify the coding of pipe so that it can get the length dynamically.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'ellipse'
})
export class EllipsePipe implements PipeTransform {
transform(value: string, length = 10): any {
let resultString = value;
if (resultString.length > length) {
resultString = resultString.substr(0, length);
resultString += '...';
}
return resultString;
}
}
Now, the transform()
function has an additional parameter length
with default value 10.
It's always a good practise to set a default value so that if parameter is not specified in the pipe the it would make use of the default value.
To make use of the pipe we simple modify the code as below
<p>{{ 'Welcome to Readers Buddy.' | ellipse:14}}</p>
Here after applying the ellipse
pipe we pass parameter with colon symbol and parameter value. Here 14 is the length value which replaced the default value. This will finally produce a result as
Welcome to Rea...
Pipes
don't have restriction for parameters. Any number of parameters can be supplied to the transform function, provided, the pipe's transform function needs to handle those parameters.