
Learning Angular
By :

We have already seen what pipes are and what their purpose is in the Angular ecosystem. Next, we will dive deeper into how we can build a pipe to provide custom transformations to data bindings. In the following section, we will create a pipe that sorts our list of products by title.
To create a new pipe, we use the ng generate
command of the Angular CLI, passing its name as a parameter:
ng generate pipe sort
The preceding command will create the sort.pipe.ts
file and its corresponding unit test file, sort.pipe.spec.ts
. Pipe files are not created inside a dedicated folder, such as components, but inside the folder where we run the ng generate
command.
A pipe is a TypeScript class marked with the @Pipe
decorator that implements the PipeTransform
interface:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort',
standalone: true
})
export class SortPipe implements PipeTransform {
transform(value: unknown...