TypeScript 2.x By Example

Using the custom pipe

Using the custom pipe is exactly the same as using the built-in pipe. We will use the custom pipe in our board component template where we loop through all the tasks as follows:

<div *ngFor="let task of board.task  | customSort: true" class="sortable-task">

Here we are calling our custom pipe and passing the value of the parameter as true, signifying that we want the values to be sorted. If we had passed the value as false, the tasks would have been displayed as they are in the JSON file.