Angular Pipe | Starter point
Tags: angular, frontend, web, beginners
Published: 2023-10-20 08:25:15



## Hello, everyone
 
Today we're going to talk about [**Pipes**](https://angular.io/guide/pipes) in the [**Angular framework**](https://angular.io).

Before we continue, it's better to get a handle on this Framework. If you're working with this Framework, this article is meant for you to use the **Pipe** to achieve **good performance** for various operations that need to alter data.

The primary question here is: 

## When should we use Pipe?


To respond to this question, first we have to see what the problem is.

Let's set a simple example. 
Suppose we want to display a user's name and last name in our template. This seems to be an easy task, right? 
To do this, all we need to do is fetch the relevant data from the appropriate API and display it.

---
ts file
```
user = {
    name: 'john',
    lastName: 'Doe'
}
```

---

html file
```
<p> {{user.name}} {{user.lastName}} </p>
```
---

We also have the **date** along with the user's name and last name coming from the API. We want to display the date too. 
It seems simple. 
All we have to do is use the binding method and put the value in a tag like `<p>`. 

---
ts file
```  
user = {
    name: 'john',
    lastName: 'Doe'
    date: new Date()
}
```

---
html file
```
<p> {{user.name}} {{user.lastName}} </p>
<p> {{user.date}} </p>
```
---

Let's see the output.


![Display data in template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u83coc8jim4796dwfqtr.png)

---

As you can see in the image above, everything is working fine. However, the main issue is displaying date. 
The format of this date is not standard and we have to display it in a format that is understandable to the user.

As you know, we can call a function inside the template. 
It is beyond awesome. 😎
Thanks, Angular. 😍
So let's write the function we need.

---

ts file
```
formatDate(date: Date): string {
    let result: string;
    result = date.getUTCFullYear().toString() + '/' + 
    date.getUTCMonth().toString() + '/' + 
    date.getUTCDate().toString();
    return result;
}
```

---
html file
```
<p> {{formatDate(user.date)}} </p>
```
---

In the function we received the date we needed and converted it to a readable date for humans.
Now, let's look at the output again.


![Function to format date](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ugge9svpf4y3xm2y7e7.png)

---

Allright. Task done! 

Everything goes well until we don't have any change detection in our template. 
In simple words, until Angular re-renders a part of the template. Let's suppose that every seconds we have something to do automatically and a data change occurs in our template.
For example, let's put a timer that updates the value every second and displays it in the template.

---

ts file
```
counter: number = 0;

ngOnInit(): void {
  setInterval(() => {
    this.counter++;
  }, 1000);
}
```

---
html file
```
<p>{{counter}}</p>
```
---

The output we want is something like the below picture.


![Display timer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nkane38ryrr5rzj3pvg.gif)

---

Ok, every thing works well. 

## Why do we need a Pipe?

The reason for using Pipe is that this process of changing date only happens once and until there is new data, it won't change again. 
**What does it mean?** 
It means that, if we put a `log` inside the function which changes the **date**, every time the counter changes, the function will also be called.

![console.log for funcction that used in template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk5bhudltk7p8e6hzuzw.gif)

---

Now, suppose that instead of having one data, we have one hundred data. It will create a big mess. To solve this problem, we should use Pipe.

Pipe ensures us that for every data, it will only be executed once and if any change is not detected, it won't be executed again. This way we can improve the **performance**. 
Let's move this function to a Pipe file.

---

```
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  standalone: true,
  name: 'formatDate'
})

export class FormatDatePipe implements PipeTransform {
  
  transform(date: Date): string {
    let result: string;
    result = date.getUTCFullYear().toString() + '/' + 
    date.getUTCMonth().toString() + '/' + 
    date.getUTCDate().toString();
    return result;
  }

}
```

---

A Pipe is a class which implements PipeTransform. Inside it the `transform()` function is used, in which we can receive different values and apply our changes on them and at the end will result in having our desired output.

## How to use?

Just import this Pipe in imports array of any module that you want to use it in. And after that you can access the Pipe using its name and actually invoke it in the template!

---

```
  imports: [
    FormatDatePipe
  ],
```

---

And then you can use it in yout template like this:

---

```
<p> {{user.date | formatDate}} </p>
```
---

We write the value we need, we use the pipe markup ( `|` ) and finally we write the name of the pipe we need.

If you want to have more values in the pipe just add a `:` after the pipe name and add more values. You have a third value too? No problem, add a `:` again and add your third value. But as you already know it's better to have less inputs for a function or use a model for sending your data.

If we put  a `log` statement here you can notice the changes.

![console.log for pipe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ylh700d6qlq0vktwau8.gif)

---

Let's recap. In this article, we saw how a disaster would occur if we used a function inside a template. Whenever Angular detects a change (doesn't matter to which part of the template), the functions that are being used in the template are executed once and this is harmful for a complex page.

The solution to this is using a **Pipe** which allows us to change our data but only executes our function (the data change function) once. It automatically gives us the result with only receiving the input on the changed variable and shows no reaction otherwise.

Thank you for reading this article. I hope it has been helpful to you.

If you have any questions, you can ask them right here.