Built-In Angular Pipes - Part 1
Tags: angular, tutorial, beginners, webdev
Published: 2022-01-02 09:52:06

**T**oday we will be learning on a very important concept provided by Angular - `Pipes`
The main use of Pipe is to transform the appearance of the data before showing to the user. 
The analogy which comes to my mind when ever I talk about Pipe is the _water filter_. A water filter takes water as input and as an output it provides us clean water, so it basically does some transformation to the water inside it.
Similarly the Angular Pipes also takes the data as input and does some transformation and sends out the transformed data.
At this point you might be thinking but why do need to transform?
The main reason is to improve the **readability**. 
Angular already provided thirteen (13) built in pipes. Lets see each of them one by one -

1. AsyncPipe - (Will discuss when I will be covering Observables)
2. CurrencyPipe 
3. DatePipe 
4. DecimalPipe 
5. I18nPluralPipe 
6. I18nSelectPipe 
7. JsonPipe 
8. KeyValuePipe 
9. LowerCasePipe 
10. PercentPipe 
11. SlicePipe 
12. TitleCasePipe 
13. UpperCasePipe

So first lets create a separate component and name it `pipe-demo`
If you are not aware of how to create a component I would highly suggest to quickly go through [this_post](https://dev.to/anubhab5/creating-angular-component-129e)

Our project structure would look like below -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0olfn09lt9gs2b1vh98.PNG)

---

`CurrencyPipe`
It is used to format the currency value as per the given country code/ currency/ decimal/ locale information. 
<u>use-case</u>
Suppose you have an e-commerce application where you store only the price of the products, but before showing to the user you need to add the currency value (either at the beginning or at the end).
In this scenario currency pipe is the best choice.

**The Syntax**
`{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo 
[ : locale ] ] ] ] }}`

Lets understand the syntax before diving into the example -

**value_expression** - The input value that needs to be formatted

| - The pipe operator 

**currency** - The name of the pipe

**currencyCode** - ISO 4217 currency code (its a standard) 
               It is _Optional_.
               It is of String type.
               Default value is USD.

**display** - This determines the way to display the currency. 
              It can be of type `symbol` (the currency symbol eg $) 
              or `code` or `symbol-narrow` or our `own custom string`.
              It is _Optional_.
              Default value is **Symbol**.

**digitsInfo** - It is the digital representation of currency 
                 value. Keeps track of how many digits to be displayed before and after decimal point if any.
             It is of String type.
             It is _Optional_.
             Default value is undefined.

**locale** - It It represents the locale format rules.
             Default value is the project locale if set else its undefined. It is also optional .

---

Now lets dive into the practical part of it.

Lets create a variable in the component.ts file and name it `expense`, and initialize it with the value `786.4589`

```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pipe-demo',
  templateUrl: './pipe-demo.component.html',
  styleUrls: ['./pipe-demo.component.css']
})
export class PipeDemoComponent implements OnInit {

  expense = 786.4589;

  constructor() { }

  ngOnInit(): void {
  }

}
```

Now, lets jump into the component template file and paste in the very simple code to start with -

```
{{ expense | currency }}

```
Now if you start the application and navigate to localhost:4200 in your browser then you must see the following output -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y9zt7lyf9euuoj1hi7b.PNG)
Here the default currency is taken is USD and the display as symbol.

Now say if you want to change it to your currency unit, say I am putting as INR (that's Indian Rupee), then the code will become like

```
{{ expense | currency: "INR" }}

```
Then the corresponding output will become like -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t20s75vs9n3yjoui65vh.PNG)
So here we are passing a **valid** currency code (here its INR) then the corresponding symbol will be displayed (here ₹)
If you are not passing a valid currency code then instead of the symbol the currency code will only be displayed.

**NOTE**
If you want to display any specific value as the default currency symbol then you have to pass it as the display parameter.
The display parameter can be `code`, `symbol` or `symbol-narrow` or any other `custom value` too.

Now lets paste the below code in the component template file -

```
<hr />
<h3>{{ expense | currency: "INR":"code" }}</h3>
<h3>{{ expense | currency: "CAD":"symbol" }}</h3>
<h3>{{ expense | currency: "CAD":"symbol-narrow" }}</h3>
<h3>{{ expense | currency: "INR":"symbol-narrow" }}</h3>
<h3>{{ expense | currency: "INR":"Indian Rupee" }}</h3>
```
You will see the output as -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/453i7f412407c5lzhpge.PNG)
_**Above output Explanation**_
`{{ expense | currency: "INR":"code" }}`
Here we are passing the currency code as INR and asking Angular to use the code only so in output you will see INR before the value is printed.

`{{ expense | currency: "CAD":"symbol" }}`
Here we are passing the currency code as CAD that is Canadian Dollar and asking to print the Symbol of it. So the output is 
**CA$**

`expense | currency: "CAD":"symbol-narrow"`
There are countries like Canada have 2 currency codes like symbol CA$ and symbol-narrow $.

`expense | currency: "INR":"symbol-narrow"`
Indian rupee does not have  symbol-narrow so the default rupee symbol is displayed.

`expense | currency: "INR":"Indian Rupee"`
If you want to display a custom value then that is also possible. You can pass as a parameter

---

We can also customize the decimal points of the currency value. For that we need to pass the `digitsInfo` parameter.

Lets paste in the below code -
```
<hr />
<h3>{{ expense | currency: "INR":"symbol":"4.2-2" }}</h3>
<h3>{{ expense | currency: "INR":"symbol":"3.1-1" }}</h3>
```

You should see the below output -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2hq9hcbjvcte0j0pp87.PNG)

`{{ expense | currency: "INR":"symbol":"4.2-2" }}`
Here 4 signifies the number of digits before the decimal point.
Since we have just 3 digits before the decimal in the example that is why a 0 is also appended at the beginning.
2-2 means that after the decimal point minimum 2 characters should be there and maximum allowed is also 2.

The minimum should **not** be greater than the maximum 
`<h3>{{ expense | currency: "INR":"symbol":"4.2-1" }}</h3>`
else you will get the below error -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqc3jypyc3gol9r8gidf.PNG)

If decimal points are not needed then we need to pass digitInfo parameter fractions as 0.

I will walk you through the locale part once I cover the internationalization and localization part.

Hope you enjoyed the post.
If yes please do like, share and comment.

Stay tuned for the remaining Pipes available in Angular.

**Cheers**!!!
_Happy Coding_