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 a list of objects according to a property of the object.

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

The Angular CLI creates the pipe file, sort.pipe.ts, along with the accompanying unit test file, sort.pipe.spec.ts, and registers it with the main application module, AppModule. On the contrary to the component, pipe files are not created inside a dedicated folder but rather inside the folder that we run the generate command in:

Figure 4.3 – Application folder structure

A pipe is a TypeScript class marked with the ...