Angular Pipe | Starter point

sadegh — Fri, 20 Oct 2023 08:25:15 +0000

Hello, everyone

Today we're going to talk about Pipes in the Angular framework.

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.

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.

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.

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.

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.

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.

Forem: sadegh

Angular Pipe | Starter point

Hello, everyone

When should we use Pipe?

Why do we need a Pipe?

How to use?