<div *ngIf="checkHere()">Check</div>

Ionic Framework ionic-v3
1

Hi all,

I’m new to Ionic 2 and I’m hoping if anyone is able to help or explain to me what’s going on.

When I include <div *ngIf="checkHere()">Check</div> on a page, the function checkHere() gets called multiple times. Is this a bug or I’ve done something wrong?

Thanks

2

The function get’s called whenever the template is evaluated. This was already an anti-pattern in Angular 1 where that function would have been called every digest loop.

To solve that and give you control when that get’s evaluated, so a solution might be

// Get's called every time a view is shown
ionViewDidEnter() {
  this.isChecked = this.checkHere();
}

and then in your template

<div *ngIf="isChecked">Check</div>

Check the NavController API Life Cycle events for more examples

1 Like
3

Thanks Vklinghammer. I thought it has something to do with the template being evaluated multiple times.

The suggestion works for a template page but It doesn’t for what i’m trying to do for a component template for a selector.

What I’m trying to achieve is to add a submenu in toolbar and a more button is shown whenever user is logged in and hidden otherwise.

<ion-navbar>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title >Dashboard</ion-title>
    <user-menu></user-menu>
 </ion-navbar>

Then in user-menu.html, i do check for user auth:

<ion-buttons end *ngIf="hasAuth">
      <button (click) = "showMenu($event)">
          <ion-icon name="more"></ion-icon>
      </button>
</ion-buttons>

In user-menu.ts, I ended up adding the checking code in the constructor:

constructor(private popoverCtrl: PopoverController) {      
  this.hasAuth = this.checkAuth();

}

Is there a more correct way of implementing a submenu in ionic 2?