How to use ng-show and hide ionic2

Question

I'm trying to show and hide the play and pause button, when the play button is pressed, I need to hide the 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 } } 

can someone help me solve this problem, 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 can create a css style and then bind the css class to an element

 .hide { display: none; } 

then in the template:

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

it may be 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; } 

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

do not bind to the hidden property unless you want to apply !important

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

At first glance, binding to the hidden property looks like the closest cousin before Angular 1 ng show. However, there is one “Important” difference.

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

Answer 2

Ionic2 uses Angular2, while Angular2 does not have the ng-show and ng-hide directives. Instead, you can use ngIf (removes and adds items from the DOM) or hidden (works like ng-hide ).

In your code:

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

Answer 3

try it

 <ion-list no-lines> <button ion-button clear item-end class="roundButton" (click)="viewType = !viewType"> <ion-icon name="add-circle" item-right></ion-icon> </button> <ion-item *ngIf="viewType"> <ion-input type="text" value=""></ion-input> </ion-item> </ion-list>