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...