Expert Angular

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