Building custom pipes

We have already seen what pipes are and what their purpose is in the overall Angular ecosystem. Νow we are going to 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 their name.

Sorting data using pipes

To create a new pipe, we use the generate command of the Angular CLI, passing the word pipe followed by its name as parameters:

ng generate pipe sort

When we run the preceding command in the src\app\products folder, it will create the sort.pipe.ts file and its corresponding unit test file, sort.pipe.spec.ts. It will also register the pipe with the associated ProductsModule in the products.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list/product-list...