How to use ng-show and hide ionic2

Question

I am trying to show and hide play and pause button, when play is clicked i need to hide pause button and vice-versa. I tried like this

<ion-content padding>    
    <button ion-button *ngIf="status"  name="play" (click)="itemSelected()" >Play</button> 
    <button ion-button *ngIf="!status" name="square" (click)="stopPlayback()" >stop</button>        
</ion-content>

    import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';


@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})

export class LoginPage {

  status: boolean = false;

    constructor(public navCtrl: NavController,
                public alertCtrl: AlertController,
                public navParams: NavParams,) {                  

                }

    ionViewDidLoad() {
        console.log('ionViewDidLoad LoginPage');
    }
 itemSelected(){
      this.status = true
    }
    stopPlayback(){
      console.log("stop");
      this.status = false
    }

}

could some one help me to resolve this issue, thanks in advance

Answer 1

Angular 2 does not have ng-show, ng-hide, use *ngIf instead

<ion-icon *ngIf="!checkStatus" (click)="play()" name="play" ></ion-icon> 
<ion-icon *ngIf="checkStatus" (click)="pause()" name="square"></ion-icon>

or you could create css style then binding class css to element

.hide {
  display: none;
}

then in template:

<ion-icon [class.hide]="!checkStatus" (click)="play()" name="play" ></ion-icon> 
<ion-icon [class.hide]="checkStatus" (click)="pause()" name="square"></ion-icon>

this maybe wrong

play(){
    console.log("play");
    this.status = false;
}
pause(){
    console.log("pause");
    this.status = false;
}

change to this

play(){
    console.log("play");
    this.status = false;
}
pause(){
    console.log("pause");
    this.status = true;
}

demo here: https://plnkr.co/edit/L59w8tmCkbEkNX5CQ1D6?p=preview

do not binding to hidden property if you don't wanna apply !important

http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

At first glance, binding to the hidden property seems like the closest cousin to Angular 1's ng-show. However, there is one "!important" difference.

ng-show and ng-hide both manage visibility by toggling an "ng-hide" CSS class on the element, which simply sets the display property to "none" when applied. Crucially, Angular controls this style and postscripts it with "!important" to ensure it always overrides any other display styles set on that element.