Pipes are used for formatting the data in our template views. Pipes will take data as input and transform it into our desired format for displaying it to end user. We can use the pipe property (|) in any Angular template or view in our project. 

Let me give you a quick rundown before we jump into creating our examples. Let's say that, from the backend service, we get the price of a product as 100, and based on the user's country or preference, we may want to display the value as $100 if the user is from the USA, or INR 100 if the user is from India. So, we are able to transform the way that we display the price without any major complexity. This is thanks to the currency pipe operator. 

Angular provides a lot of built-in pipes ready to use directly in our templates. Additionally, we can also create our own custom pipes to extend our application's functionality.

Here's the list of all the built-in pipes that Angular provides:

• Lowercase pipe
• Uppercase pipe
• Date pipe
• Currency pipe
• JSON pipe
• Percent pipe
• Decimal pipe
• Slice pipe

We will learn about each of the available built-in pipes by doing some fun, practical examples. We can make use of any of the existing template files that we have created in our Angular project so far.

We will need some data that we want to process and transform using our pipes. I am going to quickly create a dataset in our app.component.ts file:

products: any[] = [
 {
 "code": "p100",
 "name": "Moto",
 "price": 390.56
 },
 {
 "code": "p200",
 "name": "Micro",
 "price": 240.89
 },
 {
 "code": "p300",
 "name": "Mini",
 "price": 300.43
 }
 ];

We have created a sample dataset for products in our app component. Great, now we are good to apply our pipes in our app.component.html file. We are going to keep it simple in our template. We will just create a table and bind the values in the table. If you are feeling a little adventurous today, go ahead create a layout for our application using Flex-Layout, which we learned in Chapter 5, Flex-Layout – Angular's Responsive Layout Engine:

<h4>Learning Angular Pipes</h4>
<table>
 <tr>
 <td>Product Code</td>
 <td>Product Name</td>
 <td>Product Price</td>
 </tr>
 <tr *ngFor="let product of products">
 <td>{{product.code}}</td>
 <td>{{product.name}}</td>
 <td>{{product.price}}</td>
 </tr> 
</table>

In the preceding sample code, we have created a table and, using the data binding, we have bound the data in our template. Now it's time to use the pipe operator in our template. To apply any pipe, we will have to add the pipe operator against the data, as shown in the following syntax:

{{ data | <pipe name> }}

We can easily transform our product name into uppercase by applying the uppercase pipe, as follows:

<td>{{product.name | uppercase }}</td>

Similarly, we can apply the lowercase pipe as well, which will make all characters lowercase:

<td>{{product.name | lowercase }}</td>

That was very simple, you might say? So it is! Let's keep rolling. In a similar way, we will use the number pipe operator to show or hide the decimal points. 

For displaying product prices, we want to add the currency; no problem, we will use the currency pipe:

<td>{{product.price | currency }}</td>

In the preceding example, we have transformed the product price by adding the currency pipe. The remaining pipe operators I am leaving to you as homework. 

We can customize it by parameterizing the currency pipe. We will learn how to pass parameters to the pipe operators. We will have to extend the syntax of the pipe operator by passing the parameters as follows:

{{ data | pipe : <parameter1 : parameter2> }}

The preceding syntax looks similar to how we learned to define a pipe operator, except that now it has two parameters. We can define a pipe operator with any number of parameters based on our requirements. We have used the currency operator in the previous example, so let's pass parameters to extend the currency pipe operator:

<td>{{ product.price | currency: 'INR' }}</td>

We are passing the INR  parameter to our currency pipe operator. Now, the output of the currency pipe operator will not be $ anymore; instead, it will be as shown in the following screenshot:

We have learned to use built-in pipe operators in this section. Now, we'll learn about creating our own custom pipes. .