So, we saw how we can use directives to render content depending on the data that our component classes manage, but there is another powerful feature that we will be using thoroughly in our daily practice with Angular. We are talking about pipes.

Pipes allow us to filter and funnel the outcome of our expressions on a view level to transform or just better display the data we are binding. Their syntax is pretty simple, basically consisting of the pipe name following the expression that we want to transform, separated by a pipe symbol (hence the name):

@Component({
  selector: 'greeting',
  template: 'Hello {{ name | uppercase }}'
})
export class GreetingComponent{ name: string; }

In the preceding example, we are displaying an uppercase greeting on the screen. Since we do not know whether the name will be in uppercase or not, we ensure a consistent output by transforming the value of the name whenever it is not an uppercase version at the view level. Pipes are chainable, and Angular has a wide range of pipe types already baked in. As we will see further in this chapter, we can also build our own pipes to fine-grain data output in cases where the built-in pipes are simply not enough.