TypeScript 2.x By Example

Built-in pipes

Let’s look at one such pipe and use that in our application. We would want to make sure we display our task title always in upperCase even if the user entered it in lowercase. To use the built-in pipes we don’t need to do anything extra for referencing, just add the pipe symbol follow it with the pipe name to a binding where we want that pipe to take effect.

In our case, we would just add the upperCase pipe to our task template where we bind the task title as shown here:

<h4            [style.display]="editingtask ?'none' : '' "            (click)="edittask()" >{{task.title | uppercase}}</h4>

As we can see in the preceding code we just add the pipe symbol to the task.title and followed by the pipe name. This will make sure that when Angular is ...