angular ngif call a function

In Angular it is possible to call a function on the ngIf directive.

Let’s say that we have a template like this :

<div *ngIf="isBlockOpened()">
      You are authenticated
</div>

And its component :

isAuthenticated = false;

isBlockOpened() {
	return this.isAuthenticated;
}

The div will be displayed depending on the returned value of the isblockOpened function.

However beware that using a function on ngIf forces angular to re-evaluate the function at every change detection cycle. Actually angular cannot determine if there are any changes, so it relaunches the function. This can cause performance issues if the function is doing some slow computations. Using a boolean instead makes detecting a value change trivial and fast.

<div *ngIf="isBlockOpen">
      You are authenticated
</div>

Overall it is discouraged to use a function call with ngIf, or as a last resort keep the function simple.

# angular ngif call a function