Scribd
Upload
30 views

Chaining Multiple Pipes: ( (Today - Date - Uppercase - Slice:0:4) )

We can chain multiple pipes together to transform data in multiple steps. The pipes are applied one after another from left to right. For example, we can take today's date, convert it to uppercase, and slice off the first 4 characters in one expression. Custom pipes can also be defined to transform data in custom ways by implementing the PipeTransform interface.

Uploaded by

mashooqmm
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views

Chaining Multiple Pipes: ( (Today - Date - Uppercase - Slice:0:4) )

We can chain multiple pipes together to transform data in multiple steps. The pipes are applied one after another from left to right. For example, we can take today's date, convert it to uppercase, and slice off the first 4 characters in one expression. Custom pipes can also be defined to transform data in custom ways by implementing the PipeTransform interface.

Uploaded by

mashooqmm
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Chaining multiple Pipes

We can chain multiple pipes together. This particularly helps in scenarios


where we need to associate more than one pipe that needs to be applied, and
the final output will be transformed with all the pipes applied.

The workflow or chains will be triggered and apply the pipes one after
another. An example of the chain pipe syntax is given as follows:

{{<EXPRESSION>|<PIPE_NAME>|<PIPE_NAME>|
<PIPE_NAME>}}

{{today | date | uppercase | slice:0:4}}


In the above example we can see how chaining of multiple pipes can be
implemented to provide useful information. We applied two chain pipes in the
preceding code. First, DatePipe is applied to the today variable, and just after
that, the uppercase pipe is applied.

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

@Component({
template: `
<h5>Chain Pipes</h5>
<p>Month is {{today | date | uppercase | slice:0:4}}
`,
})
export class ChainPipeComponent {
today = new Date();
}

Custom Pipes
Pipes offer a powerful mechanism to transform data, leading to a better UI
experience. In Angular 9, we can even define custom pipes to provide custom
transformation.
We will implement a custom pipe to filter data from an array bound to the view.
The @Pipe metadata decorator is used to create a custom pipe and the name of
the custom pipe is passed to this decorator. The pipe class implements the
PipeTransform interface, which provides the transform method. This method
must be implemented to write logic for the custom pipe.
The transform method accepts the value to be processed as an input parameter.
The value of the parameter is used for implementing logic of the custom pipe.
The transform method can be implemented without implementing the
PipeTransform interface in custom pipe. But implementing this interface gives
tooling support for the signature of the transform method, which can be quite
useful in large projects.
Let us take an example to understand the functioning of custom pipes.
Here's a custom pipe named ExponentialStrengthPipe that can boost a hero's
powers:

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


/*
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
* Usage:
* value | exponentialStrength:exponent
* Example:
* {{ 2 | exponentialStrength:10 }}
* formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent?: number): number {
return Math.pow(value, isNaN(exponent) ? 1 : exponent);
}
}

This pipe definition reveals the following key points:

 A pipe is a class decorated with pipe metadata.


 The pipe class implements
the PipeTransform interface's transform method that accepts an input
value followed by optional parameters and returns the transformed value.
 There will be one additional argument to the transform method for each
parameter passed to the pipe. Your pipe has one such parameter:
the exponent.
 To tell Angular that this is a pipe, you apply the @Pipe decorator, which
you import from the core Angular library.
 The @Pipe decorator allows you to define the pipe name that you'll use
within template expressions. It must be a valid JavaScript identifier. Your
pipe's name is exponentialStrength.

To demonstrate the pipe:

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

@Component({
selector: 'app-power-booster',
template: `
<h2>Power Booster</h2>
<p>Super power boost: {{2 | exponentialStrength: 10}}</p>
`
})
export class PowerBoosterComponent { }

Note the following:

 You use your custom pipe the same way you use built-in pipes.
 You must include your pipe in the declarations array of the AppModule

 If you choose to inject your pipe into a class, you must provide it in
the providers array of your NgModule.

You might also like