angular 6 variable or method binding in *ngIf

Question

Is there any difference between binding a variable and binding a method in template *ngIf.

Ex:

Case 1:

<div *ngIf="myVar">ABC</div>

Case 2:

<div *ngIf="myFunction()">ABC</div>

myFunction() : boolean {
   if (cond1 && cond2 && cond3) {
       return true;
   } else { 
       return false;
   }
}

Is there any impact on performance?

I am trying to use the 2 case, getting range Error: Maximum call stack exceeds.

Help me on this? Thanks

Answer 1

Yes there is

The first one wont have any performance issue since you are directly checking against a variable while the second one will have since angular uses change detection and it fires many times

Answer 2

When u call a function angular fire the change detection cycle every time. better to use a get property

<div *ngIf="myvar">ABC</div>

get myvar() : boolean {
  if (cond1 && cond2 && cond3) {
    return true;
  } 
  return false;
}

Answer 3

what you can do to avoid performance issue is that you can make a class variable

public myVar = cond1 && cond2 && cond3

and then you can use it in first option and maintain readability of the code