A pipe can accept any number of optional parameters to fine-tune its output. The parameterized pipe can be created by declaring the pipe name with a colon ( : ) and then the parameter value. If the pipe accepts multiple parameters, separate the values with colons. Let's take a birthday example with a particular format(dd/MM/yyyy):
import{Component}from'@angular/core';
@Component({
selector: 'app-birthday',
template: `<p>Birthday is {{ birthday | date:'dd/MM/yyyy'}}</p>`// 14/07/1986
})
exportclassBirthdayComponent{
birthday=newDate(1986, 7,14);
}
Is it helpful?
Add CommentView Comments
Ques 32. How do you chain pipes in Angular?
You can chain pipes together in potentially useful combinations as per the needs. Let's take a birthday property which uses date pipe(along with parameter) and uppercase pipes as below
import{Component}from'@angular/core';
@Component({
selector: 'app-birthday',
template: `<p>Birthday is {{ birthday | date:'fullDate' | uppercase}} </p>`// SUNDAY, JUNE 14, 1986})
exportclassBirthdayComponent{
birthday=newDate(1986,7,14);
}
Is it helpful?
Add CommentView Comments
Ques 33. What is a custom pipe in Angular?
Apart from built-inn pipes, you can write your own custom pipe with the below key characteristics,
A pipe is a class decorated with pipe metadata @Pipe decorator, which you import from the core Angular library For example,
@Pipe({name: 'myCustomPipe'})
The pipe class implements the PipeTransform interface's transform method that accepts an input value followed by optional parameters and returns the transformed value. The structure of pipeTransform would be as below,
interfacePipeTransform{
transform(value: any, ...args: any[]): any
}
The @Pipe decorator allows you to define the pipe name that you'll use within template expressions. It must be a valid JavaScript identifier.
Ques 34. Give an example of custom pipe in Angular?
You can create custom reusable pipes for the transformation of existing value. For example, let us create a custom pipe for finding file size based on an extension,
Ques 35. What is the difference between pure and impure pipe in Angular?
A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object). An impure pipe is called for every change detection cycle no matter whether the value or parameters changes. i.e, An impure pipe is called often, as often as every keystroke or mouse-move.
