This article will give you an idea of how pipes can improve Angular application performance

Let’s use an example to demonstrate:

Example

@Component({
  selector: 'my-app'.template: '
 {{user.name}} There is a cat {{getCat(user.id).name}} 
'.styleUrls: ['./app.component.css']})export class AppComponent {
  users = [{ id: 1.name: 'wang' }, { id: 2.name: 'li' }];
  cats = [{ name: 'Tom'.userId: 1 }, { name: 'Jerry'.userId: 2 }];

  getCat(userId: number) {
    console.log('🤪 User', userId);
    return this.cats.find(c= >c.userId === userId); }}Copy the code

There are two groups of data respectively users and CATS. Users can be understood as incoming data or other data sources. Getting the corresponding cat using the getCat() method is a familiar scenario from business development. Finally, add the global template directly for a loop output.

Now let’s look at the output

🤪User 1 🤪User 2 🤪User 1 🤪User 2 disk User 1 disk User 2 disk User 1 disk User 2 disk UserCopy the code

The getCat() method can be called 8 times, with 6 useless calls. This is because when a method is used within a template, Angular calls its method every time it changes detection.

We can add a listening event

@HostListener('click')
clicked(){}Copy the code

Every time a click event is triggered, it is called four times

🤪User 1
🤪User 2
🤪User 1
🤪User 2
Copy the code

This is not what I want, I just want it to be called twice!! It’s not gonna work with a lot of data.

Pure Pipe

Then it’s time for the main character. Let’s create a pipe first

@Pipe({
  name: 'cat',})export class CatPipe implements PipeTransform {
  constructor(private appComponent: AppComponent) {}

  transform(value, property: 'name' | 'userId'): unknown {
    console.log('🤪 User', value);
    const cat = this.appComponent.cats.find(c= > c.userId === value);
    if (cat) {
      returncat[property]; }}}Copy the code

You can see that the implementation of Pipe is basically the same as the method called before, but after adding the reference to the template, you find that the result is as expected, with only two calls.

This is because pipe defaults to Pure Pipe, and the Pipe decorator has pure available to set the pipe mode.


@Pipe({
  name: 'cat'.pure: true
})
Copy the code

Pure stands for whether the change detection call is not followed when the value of the transform (input parameter value) changes.

Official explanation: If the pipe has internal state (that is, its results depend on internal state, not just parameters), set Pure to false. In this case, the pipe is called once every change detection cycle — even if its parameters have not changed at all. When true, the pipe is pure, meaning that the transform() method is invoked only when its input arguments change. Pipes are pure by default.

When changing pure to false, detection is called multiple times with the change, regardless of whether the value has changed.

Understand change detection: Understand the Angular onPush change detection strategy

This reduces unnecessary calls to angular templates by replacing methods in templates with pipes.

conclusion

It is better to call pipe than methods when the data in the template is static and needs to be transformed or processed.

The example above is Stackblitz

The last

After reading this article, please click “like” and “support” at 👍👍👍, which is the biggest support for us.

MOE new articles have ideas welcome to point out, I will optimize in time, can also discuss learning 🤺.