using a function in *ngIf runs several times instead of once

Question

Template

<pre *ngIf="isAdmin()">{{email|json}} - {{user|json}}</pre>

Component

isAdmin() {
    console.log('isAdmin: ', this.bcAuthService.isAdmin());
    return this.bcAuthService.isAdmin();
}

Service

isAdmin() {
    return this.admins.includes(localStorage.getItem("email"));
}

Problem

the function in the component keeps printing several times. Why? Is this wrong? What is a better way?

Answer 1

Template methods will almost always be called multiple times. The same is true for *ngFor that it is iterated over multiple times. If you have something that executes an expensive call then you should cache the result and return that either in the method or use ngOnInit to retrieve/calculate the values and set them in your component.

Template code

<pre *ngIf="isAdmin">{{email|json}} - {{user|json}}</pre>

Component

export class MyComponent implements OnInit {

    isAdmin: boolean;

    ngOnInit() {
        this.isAdmin = this.bcAuthService.isAdmin();
        console.log('isAdmin: ', this.isAdmin);
    }
}

Answer 2

after finding this why *ngIf in angular 2 always is executing when use function?

i resolved the problem by

component

ngOnInit() {
    this.is_admin();
}
is_admin() {
    this.isAdmin = this.bcAuthService.isAdmin();
}

html

<pre *ngIf="isAdmin">{{email|json}} - {{user|json}}</pre>

Answer 3

Now you don't have method(member instead) and it's not spamming "isAdmin: true" but it's not means that problem is resolved.

You can be interested in changeDetection of the component and ChangeDetectorRef to actually tell angular when isAdmin is changed to update template(detectChanges).