Getting Started with Angular - Second Edition

Transforming data with pipes

It is time to take a look at the last building block that Angular provides for the development of applications that we haven't covered in detail yet-the pipes.

Just like the filters in AngularJS, pipes are intended to encapsulate all the data transformation logic. Let's take a look at the template of the home page of the application we have just developed:

... 
<td [ngSwitch]="dev.popular"> 
  <span *ngSwitchCase="true">Yes</span> 
  <span *ngSwitchCase="false">Not yet</span> 
</td> 
... 

In the preceding snippet, depending on the value of the popular property, we show different data using the NgSwitch and NgSwitchCase directives. Although this works, it is redundant.

Developing stateless pipes

Let's develop a pipe that transforms ...