Play and pause buttons are not shown. Ionic angular project

Issue

I intend to replicate a music player. However, the play and pause button aren't shown in the app. How do I fix it in order the play and pause buttons to be shown in the app? Here you have the app: https://www.youtube.com/watch?v=d_rKawKDq58.

TS code:

[...]
activeTrack: Track = null;
player: Howl = null;
isPlaying = false;

  constructor() {}

  start (track: Track) {
    if (this.player) {
      this.player.stop();
    }
      this.player = new Howl ({
        src: [track.path],
      onplay: () => {
        this.isPlaying = true;
         this.activeTrack = track;
        },
    onend: () => {console.log('onend'); }});
  this.player.play();

}

  togglePlayer(pause) {this.isPlaying = !pause;
  if (pause) {this.player.pause(); } else {this.player.play();}}

next () {}
prev () {
  let index = this.playlist.indexOf(this.activeTrack);
  }
seek () {}
updateprogress () {}

}

HTML code:

[...]

</ion-content>

<ion-footer *ngIf="activeTrack">
  <ion-toolbar color="dark">
   <ion-row>
     <ion-col size="12" class="ion-text-center">
        {{ activeTrack.name }}
      </ion-col>
      <ion-col size="12">

      </ion-col>
       <ion-col size="12" class="ion-text-center">

          <ion-button fill="clear" (click)="prev()" color="light">
            <ion-icon slot="icon-only" name="play-skip-back"></ion-icon>
            </ion-button>

            <ion-button fill="clear" (click)="togglePlayer(true)" *ngIf="!isPlaying" color="light">
               <ion-icon slot="icon-only" name="play"></ion-icon>
            </ion-button>

            <ion-button fill="clear" (click)="togglePlayer(true)" *ngIf="!isPlaying" color="light">
              <ion-icon slot="icon-only" name="pause"></ion-icon>
           </ion-button>

            <ion-button fill="clear" (click)="next()" color="light">
                <ion-icon slot="icon-only" name="play-skip-forward"></ion-icon>
            </ion-button>

Here you have the app picture: https://ibb.co/4gFpYJW

Thank you for your help and solution !

Solution

Try this code, I checked video and in both button you have set !isPlaying.

As per video you have to set in !isPlaying in play button and isPlaying in pause button.

<ion-button fill="clear" (click)="togglePlayer(true)" *ngIf="!isPlaying" color="light">
               <ion-icon slot="icon-only" name="play"></ion-icon>
            </ion-button>

            <ion-button fill="clear" (click)="togglePlayer(true)" *ngIf="isPlaying" color="light">
              <ion-icon slot="icon-only" name="pause"></ion-icon>
           </ion-button>

Answered By - Ravi Ashara