Enable disable a button in alist

Question

I created a media playback function where i could make a play back of the audio file that i have created, I have a list that has the file name and two buttons that will be displayed by ngIf status, Only one button will be displayed on the list. In this list when i click a play button (now stop button gets to visible state ) i want that item button to be enabled and other button in that list should be disabled. could someone help me

 <ion-content padding class="has-header">
    <ion-list>
        <ion-grid>
            <ion-row *ngFor="let file of MyAudioFiles let i = index  ">
                <ion-col width-60 style="padding-top:  6px;">
                    {{file.audio.name}}
                </ion-col>
                <ion-col width-20  > 
                    <ion-icon style="padding-top: 9px;" *ngIf="!file.status" name="play" (click)="startPlayback(file.audio, i)"></ion-icon>
                    <ion-icon style="padding-top: 9px;" *ngIf="file.status" name="square" (click)="stopPlayback(file.audio, i)"></ion-icon>
                </ion-col>               
            </ion-row>
        </ion-grid>
    </ion-list>
</ion-content>

startPlayback(audio, i) {
        try {

            console.log("start playback file name and index", audio.name, i);
            this.MyAudioFiles[i].status = true;

            var pathalone = audio.nativeURL;
            this.file = new MediaPlugin(pathalone, (status) => {
                console.log("playback status", status);
                this.playbackStatus = status
                if (status == 2) {
                    console.log("MEDIA RUNING")
                }
                if (status == 4) {
                    console.log("MEDIA STOPPED")
                    this.MyAudioFiles[i].status = false;
                }
            });
            console.log("play back file getDuration", this.file.getDuration());
            this.file.play();
            console.log("playbackStatus", this.playbackStatus);
        }
        catch (e) {
            this.showAlert('Could not play recording.');
        }
    }

Answer 1

I suggest you use icon-only button instead of ion-icon as the latter does not have a disabled attribute.

<button ion-button style="padding-top: 9px;" *ngIf="!file.status" (click)="startPlayback(file.audio, i)" clear icon-only [disabled]="isPlaying()">
  <ion-icon name="play"></ion-icon>
</button>

You can define isPlaying() to return based on whether media is playing a file or not.

isPlaying(){
  return this.MyAudioFiles.filter(file=>file.status==true).length > 0;
}