Reputation: 1074
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
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