Pipes

Another interesting template feature that we have not discussed yet are pipes. Pipes allow you to format the template content in-place, right in the template. Instead of formatting content in the component, you could just write a pipe to do so for you right in the template. Here is a perfect example for a pipe:

<div class="container">  <h2>{{0.5 | percent}}</h2></div>

Adding the | percent after a decimal figure changes the value to a percentage representation, as shown in the following screenshot:

Here is another example with one of the case pipes:

<div class="container">  <h2>{{0.5 | percent}}</h2> <h3>{{'this is uppercase' | uppercase}}</h3> ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.