5

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

Yashavanta Byagawadi
  • 59
  • 1
  • 7
  • If you want to know how much trouble you might be in if you use a function - try adding `console.count()` inside of it, and see how many times it will be called. – k.s. Aug 07 '18 at 09:28
  • It is calling thousands of time. – Yashavanta Byagawadi Aug 07 '18 at 09:39
  • That's exactly why you don't do that. Angular change detection will go through it again and again. – k.s. Aug 07 '18 at 09:40
  • If i want to do multiple condition checks like *ngIf="cond1 && cond2 && cond3 && con4". it will be very big line in the template i want to avoid that type of coding. Is there any way? – Yashavanta Byagawadi Aug 07 '18 at 09:44

3 Answers3

6

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

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
4

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;
}
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
0

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

Danish Arora
  • 330
  • 1
  • 6