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

0
votes

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!

1
ionic-frameworkionic3
Could you add the piece of code where you're toggling isPlaying? Otherwise it'll be hard to reproduce your issue. Maybe you can even create a stackblitz that demonstrates your issue - Phonolog
Added the component code above. - Jed

1 Answers

2
votes

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.