Transforming data with pipes

Now 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—pipes.

Just like 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 the value of the popular property and uses it in place of NgSwitch and NgSwitchCase. The pipe will accept three arguments: a value that should be transformed, a string that should be displayed when the value...