Does Angular memoize inline *ngIf condition statements?

Question

Does Angular memoize inline *ngIf condition statements? If I have for example:

<form [formGroup]="form" *ngIf="inputModels.length < 200">

is "inputModels.length < 200" recalculated every time change detection runs, or it's stored until inputModel changes?

Answer 1

Yes, Angular take care of this for you!

This mechanism works because Angular generate a factory for every component.

A component factory mostly consists of the view nodes generated by the compiler as a result of template parsing.

Since a factory component is a large topic, I'll just stop at this function: updateRenderer

The updateRenderer take care about updating the component's DOM when needed.

Every component, by default, is added to a TreeRenderList , an array of objects. Angular use that array for a lot of things. The most important two feature, in my personal opinion, about that, are these two:

• Update the component's DOM.
• Update the component's binding when they change

Update the component's binding when they change, what does it mean?

Let's take an easy example to exaplain this.

    export class AppComponent {
      @Input() myInput: string;
    }

<p>{{myInput}}

We know that eveytime myInput change we see the changes in the relative html (by default). And this works becasuse of the TreeRenderList and the updateRenderer function.

Can I prevent Angular to update the component's DOM?

Yep! and it's very easy. If we generate a component using the cli ( ng gc component-name ) it's decorator will be something like that:

@Component({
    selector: 'my-component',
    templateUrl: 'xxx.component.html',
    styleUrls: ['xxx.component.css'],
})

But there a lot of properties we can specify. One of it is changeDetection .

By default Angular use the Default strategy, meaning that the framework will decide on how and when update the component's DOM.

We can change it to be OnPush . By doing that we are telling Angular that it doesn't need to update the component's DOM on its logic. Adding this property to the decorator, will result like this:

 @Component({
        changeDetection: ChangeDetectionStrategy.OnPush,
        selector: 'my-component',
        templateUrl: 'xxx.component.html',
        styleUrls: ['xxx.component.css'],
    })

If we try now to update the @Input , we will not see any changes. That's where ChangeDetectionRef comes in our help. In orded to use it, we need to inject it into the component and we can use this.changeDetectionRef.detectChanges() to programmatically tell Angular to update the component's DOM.

I wrote an in-depth guide on ChangeDetectionRef here, if you want to read it: https://medium.com/@sciampi.jacopo/angular-performances-a-guide-to-change-detection-b8a02c0b7b00

Answer 2

由于变量 inputModel 的变化条件也在那个时候检查。*NgIf 检测到变化。因此对 inputModel 变量条件的变化得到检查