CODEWITHSUNDEEP
angularionic2
Yokesh Varadhan
Yokesh Varadhan

Reputation: 1636

How to use ng-show and hide ionic2

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

every time i click stop only stop is visiable

Upvotes: 15

Views: 49701

Answers (3)

MaryAnn
MaryAnn

Reputation: 393

Try This

<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>

Upvotes: 0

Tiep Phan
Tiep Phan

Reputation: 12596

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.

Upvotes: 29

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

Ionic2 uses Angular2, and Angular2 doesn't have the ng-show and ng-hide directives. Instead, you can use either 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>

Upvotes: 11

Related Questions