CODEWITHSUNDEEP
ionic-frameworkionic3
Jed
Jed

Reputation: 1074

Ionic: Icon doesn't switch back when using *ngIf

So I have the following button in Ionic:

HTML

<button ion-button (click)="play()">
   <ion-icon *ngIf="!isPlaying" name="play"></ion-icon>
   <ion-icon *ngIf="isPlaying" name="stop"></ion-icon>
</button>

Component

play() {
  this.isPlaying = true;
  this.nativeAudio.play('audioId', () => {
    this.isPlaying = false;
  });
}

Right now when I click the button the icon switches to stop which indicates the play has started. But when after playing even when I set the isPlaying to false the button still shows the stop icon.

Now in my view there are different buttons and I noticed that when I press one of the other buttons the icon now switches to the play icon. It almost seems like the UI doesn't refresh until there's another activity on the UI. This also happens when I try to switch displayed images using *ngIf.

Thanks in advance!

Upvotes: 0

Views: 1295

Answers (1)

Arj 1411
Arj 1411

Reputation: 1401

Try like this.

play(){
   this.isPlaying = ! this.isPLaying;
}

in your html file

<button ion-button (click)="play()">
   <ion-icon [name]="!isPlaying? 'play':'stop'"></ion-icon>
</button>

Hope this helps.

Upvotes: 2

Related Questions