Ionic 2-3 *ngIf doesn't update the view

Question

I'm developing an Ionic application in version 3.

I have a side menu (toggle menu) which is defined in app.html

<ion-menu [content]="content" (ionClose)="menuClosed()(ionOpen)="menuOpened()">
<ion-header>
  <ion-toolbar>
    <ion-title>Menu</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
    <button menuClose ion-item (click)="toggleHelp()">
        <ion-icon item-start name="help-circle"></ion-icon>
        <ion-label>Help</ion-label>
    </button>
</ion-content>

In the file app.component.ts, there is this function:

private toggleHelp = () =>{
  this.helpClicked = true;
  this.homePage.showHelp();
}

In my home page, I have a card that explain stuff. The user can hide it and if the user opens the sidemenu, he can click on the button Help (that is declared on the sidemenu) and it will show the card again.

home.html looks like:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-padding>
  <ion-refresher (ionRefresh)="doRefresh()"></ion-refresher>
  <ion-card margin *ngIf="(help_shown == true)" class="card-help">
<span class="button_acknowledgement">
  <button ion-button clear color="bluelight" (click)="hideHelp()">I GOT IT</button>
</span>
    </ion-card>
</ion-content>

in the home.ts:

export class HomePage {

  help_shown = true;

  constructor(private platform: Platform, private zone: NgZone) {
  }
    private hideHelp = () =>{
      this.help_shown = false;
      console.log("help_shown: "+this.help_shown)
    }
public showHelp = () =>{
    this.zone.run(() => {
      this.help_shown = true;
      console.log("help_shown: "+this.help_shown)
    });        
}

So now, when i click on the button I got it, the card will be hidden (because the variable help_shown will be changed to false). When I click on help inside the menuside, the variable help_shown will be modified by the function (it will pass at true, I logged it so i'm sure it is working), however the card does not appear even thought the *ngIf should do it appears. I tried with the ngZone, but without success. Can somebody help me please?

PS : If i create a button inside the homepage, that will change the variable help_shown, it will work as well.

You can try what i say here: https://ionic-n35gsm.stackblitz.io

Answer 1

Change

From

<ion-card margin *ngIf="(help_shown == true)" class="card-help">

To

<ion-card margin *ngIf="help_shown" class="card-help">

Answer 2

My best guess is that you run into some scope problem because you defined your functions as variables. Try changing them as follows:

hideHelp() {
  this.help_shown = false;
}

showHelp() {
  this.help_shown = true;
}

And as @Sajeetharan already mentioned you do not need to explicitly compare a boolean variable to true or false.

Answer 3

Try with setTimeout() and let me know.

.html

 <ion-card margin *ngIf="help_shown" class="card-help">

.ts

   help_shown:boolean = true;

   constructor(private platform: Platform) {
     }

    showHelp(){
       setTimeout(() => {
          this.help_shown = true;
       },500);        
    }

Answer 4

Ok I solved my problem by declaring a Event in the menuside when the button is pressed. And on the HomePage there is a event listener on the constructor.