Defining a pipe

The pipe operator is defined with a pipe symbol, (|), followed by the name of the pipe:

{{ appvalue| pipename }}

The following is an example of a simple lowercase pipe:

{{"Sridhar Rao"|lowercase}} 

In the preceding code, we are transforming the text to lowercase using the lowercase pipe.

Now, let's write an example Component using the lowercase pipe example:

@Component({
 selector: 'demo-pipe',
 template: `
 Author name is {{authorName | lowercase}}
 `
})
export class DemoPipeComponent {
 authorName = 'Sridhar Rao';
}

Let's analyze the preceding code in detail:

• We defined a DemoPipeComponent component class
• We created a string variable, authorName, and assigned the value, 'Sridhar Rao'
• In the template view, we displayed authorName; however, before we printed it in the UI, we transformed it using the lowercase pipe

Run the preceding code, and you should see the following output:

Well done! In the preceding example, we have used a built-in pipe. In the subsequent sections, you will learn...