Displaying Play/Pause Button in angular - css

Question

I want to implement the show/hide feature of the play and pause buttons on a list of tracks in angular 7. I originally got this feature partially working using angular animation, but my method would change the state of all buttons in my list instead of a single item. I've also tried using ngClass but couldn't seem to get it working right.
Below is my latest efforts. Please help me.
<mat-card class="track-box" *ngFor="let track of tracks" cdkDrag>
<div class="custom-placeholder" *cdkDragPlaceholder></div>
<span>
<mat-icon
class="play-button md-48"
[ngClass]="{'show' : track === selectedTrack}"
(click)="toggle(track)"
> play_circle_outline</mat-icon>
<mat-icon
class="pause-button md-48"
[class.selected2]="track === selectedTrack"
(click)="toggle(track)"
>pause_circle_outline</mat-icon>
</span>

Answer 1

I would have to disagree with #Tomato 's answer, as per my comment on his answer.
However, what I would recommend is using Angular's NgClass which is similar to ngIf. But here's the catch.
When it comes to ngIf, you're creating 2 components, hiding one and showing the other, and doing that operation over and over again. Which is not the best code practice.
However, in the case of ngClass, you're creating one component and 2 separate SCSS classes for the same component. Whenever a certain condition is satisfied, one SCSS Class gets applied, and so forth.
HTML File
<span>
<button
class="play-pause-button"
[ngClass]="toggle(track)"></button>
</span>
TS File
export class Component {
let isPlay = false;
public toggle(track: string) {
this.isPlay = !this.isPlay;
this.isPlay ? return 'play-button'; : return 'pause-button'
}
}
That way, the toggle() function will return a SCSS class name based on the current status of the button itself.

Answer 2

Using ngClass
You could change the shown button icon by using ngClass as following:
<mat-card class="track-box" *ngFor="let track of tracks" cdkDrag>
<div class="custom-placeholder" *cdkDragPlaceholder></div>
<span>
<mat-icon
class="md-48"
[ngClass]="{'play-button' : track != selectedTrack,
'pause-button' : track === selectedTrack}"
(click)="toggle(track)">Some output here</mat-icon>
</span>
</mat-card>
Using ngIf
You could maybe use an ngIf (docs) to show/hide the buttons, though as Chris pointed out, this creates two elements for every track in your list and could cause performance issues on a very huge list.
<mat-card class="track-box" *ngFor="let track of tracks" cdkDrag>
<div class="custom-placeholder" *cdkDragPlaceholder></div>
<span>
<mat-icon
class="play-button md-48"
*ngIf="track != selectedTrack"
(click)="toggle(track)">play_circle_outline</mat-icon>
<mat-icon
class="pause-button md-48"
*ngIf="track === selectedTrack"
(click)="toggle(track)">pause_circle_outline</mat-icon>
</span>
</mat-card>
When your selectedTrack does not equal the track, show the play-button, if it is the same track, show the pause-button.
You could also use the if-else-block for this (from the docs):
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>