How Pipes Work
Explore how Angular pipes work by implementing the transform function to convert input data into formatted output. Understand pipe declaration, usage in templates, adding multiple parameters for flexible transformations, and the process of applying pipes to enhance your application’s data presentation.
We'll cover the following...
Basic notation and usage
Pipes are classes marked by the @Pipe decorator, just like directives have the @Directive decorator on top of their class.
Here’s an example:
@Pipe({
name: 'myPipe',
})
export class MyPipe {
...
}
Pipes need to be declared in a module that uses these pipes. So, we need to remember to add these into the declaration field of our
NgModule:
@NgModule({
declarations: [
MyPipe
]
})
export class MyModule {
}
Pipes usually contain logic that works for the entire application Therefore, it usually makes sense to declare them in the shared module of our Angular application.
How pipes function
Similar to directives, pipes don’t always work the same way. The logic implemented in each pipe varies, but there’s a pattern they all follow.
The essential part is the function in the pipe, which ultimately does all the transformation and generates the output. Let’s look at this example of a simple pipe below:
@Pipe({