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

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?


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

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.

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

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>

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?