Member-only story
Pipes: The Angular feature that you didn’t know you needed
In Angular when developing, you can sometimes find the need to transform a value before presenting it in the template. To achieve this, Angular has inbuilt functionality called pipes.
Published in
6 min readFeb 13, 2021
What is a pipe in Angular?
As explained in the angular official documentation, in Angular, pipes are used to transform data for display. Pipes are simple functions that you can use in template expressions to accept an input value and return a transformed value. Example:
<p> My name is {{ name | uppercase }}</p>Why use a pipe in Angular?
To understand why pipes are important in Angular, there are two things we have to go through; The problem and SOLID software design principle.
The problem:
Imagine you want in your angular component you want to display a name in title case. In general this can be achieved by creating a function in the component that will perform the change first then add the value to the variable.
In app.component.html file:
export class AppComponent {
name = 'JOhn DoE';
ngOnInit(): void…
