Memo Decorator In Angular Pipes

Memo Decorator

What is Memo Decorator?

It is an open-source platform that enhances the caching of pipe’s transform() function.
It works with only primitive value types.
It checks the value being passed and catches the response. If the same values are passed again, it will return the calculation from the cached result.
It is extremely helpful when complex logic is being calculated based on the table’s rows. Using these decorators, we can completely avoid the duplicate for the same input again and again.

For more details, please check here.

Let's jump into the code part and see how it works. Follow the steps mentioned below.

Step 1

Install the NPM package.

npm i memo-decorator --save

Step 2

Create two pipes to demonstrate the difference between a normal pipe and the memo pipe.

ng g p salaryCalculation
ng g p dateFormat
import memo from 'memo-decorator';

Step 3

Now, add some logic to your pipe, as below, with memo decorator.

import { Pipe, PipeTransform } from '@angular/core';
import memo from 'memo-decorator';
@Pipe({
name: 'salaryCalculation'
})
export class SalaryCalculationPipe implements PipeTransform {
@memo()
transform(month: number): number {
return this.getSalary(month);
}
getSalary(month: number) {
console.log('memo pipe called');
return month * 4000;
}
}

This is the code for the other pipe without memo decorator; just understand the difference between it and the memo pipe.

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({
name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {
transform(date: Date): any {
console.log('DateFormatPipe called');
const datePipe = new DatePipe('en-US');
return datePipe.transform(date, 'dd/MM/yyyy');
}
}

Step 4

Create one sample component to test the memo decorator pipe and normal pipe. So, add this code.

sampleData: { name: string; month: number; ViewDate: Date }[];
ngOnInit() {
this.sampleData = [{name: 'Rahul', month: 5, ViewDate: new Date() },
{name: 'Rajendra', month: 2, ViewDate: new Date()},
{name: 'Annu', month: 9, ViewDate: new Date()},
{name: 'Aishu', month: 3, ViewDate: new Date()},
{name: 'Raj', month: 5, ViewDate: new Date()}
];
}

Step 5

Given below is the HTML code snippet to loop through all the array items

<div clas="row">
<ul *ngIf="sampleData">
<li *ngFor="let user of sampleData">
<p>{{ user.name }} - {{ user.month | salaryCalculation }} - {{user.ViewDate| dateFormat}}</p>
</li>
</ul>
</div>

In this poc, I have a small array object with some data as you can see in step 4 - basic name, month, and date. Here, I'm going to apply the pipes which we created above and find out the difference and benefits of using memo decorators. Let's run it and see the output. I have added a console log to each pipe to see how many times it's called.

It is the browser output.

Let's check the console output.

I hope you got the difference. The non-memo pipe was called 5 times. It was called as per the records in an array while the memo pipe was called only four times even when the row count is 5 . The reason is that Rahul and Raj have the same month data. So, our memo decorator ignored the salary calculation as it already calculated for Rahul, so it returned the cached response value for Raj when the same month was received for calculation.

Conclusion

Memo Decorators are very useful when it comes to an enterprise application where we do a lot of business logic operations performed on each row or transaction. It completely avoids the unnecessary calculation and helps us to boost the application performance.

Let me know if you have any questions or suggestions.