Pipe Basics

We’ll start things off by learning how to use pipes. Using pipes isn’t tricky at all. We’ll be up and running in less than a few minutes.

Angular comes with some pipes by default. The team has developed pipes for the most common situations. A full list of pipes provided by Angular can be found here.

TitleCasePipe

The first pipe we’ll use is the TitleCasePipe. This pipe will capitalize the first letter of each word in a string. Any other characters are lowercase. The goal of the TitleCasePipe is to output a title. It also works very well for names.

This can come in handy when you have an input where the user may forget to capitalize some words or names.

In the app.component.ts file, we’ll add a new property called name, to the class.

export class AppComponent {
  name = 'john doe';
}

The value of the name property is a string in all lowercase letters. Typically, the value may come from a database or input. For demonstration purposes, we’re going to keep things as simple as possible. We’ll hardcode the values ourselves.

In the app.component.html template file, we’ll clear out the default template and replace it with the following:

<p>{{ name | titlecase }}</p>

The output will be John Doe. A pipe can be inserted using the pipe character (|). This may depend on the layout of your keyboard, but the pipe character can typically be found by holding shift and pressing the key above the enter key. This is followed up by the name of the pipe we’d like to use.

Angular will run the expression first. The value from the expression will be passed to the pipe, which is a function. The pipe will return the formatted value, and we get the output.

The main purpose of a pipe is to help you transform output without having to modify the property in the class. The value for the name property will always be john doe, even after running it through a pipe. Pipes will simply transform the output in the template.

Here’s the final source code: