Add selected class to each clicked item in ngFor - css

Question

Issue: With the current code, when i click an item, it correctly adds the "selected" class to the clicked item, but when i click another option, the "selected" class gets removed from it and gets added to the newly clicked item.
Wanted: I want to have the selected class added to all items which have been selected, my code is below, would appreciate any help:
My Html:
<form (ngSubmit)="onSubmit()">
<div *ngFor="let event of groupSelections; let i = index;" class="row">
<div class="col-12">
<div class="row">
<div *ngFor="let team of event?.Actors; first as isFirst" class="col-6">
<div class="row">
<div *ngIf="isFirst" class="col-6">
<div>
{{ team?.ActorName }}
</div>
</div>
<div class="col-6">
<div [className]="selectedValue == team?.Players ?'selected':''">
<select (change)="getSelections(team, event, $event, team?.Players)">
<option value="none" selected disabled hidden>SELECT</option>
<option value="" *ngFor="let player of team?.Players; let j = index">
{{ player?.Name }}
</option>
</select>
</div>
</div>
<div *ngIf="!isFirst" class="col-6">
<div>
{{ team?.ActorName }}
</div>
</div>
</div>
</div>
</div>
</div>
My function:
getSelections(actors, event, selectedOption, player): any {
const selections = [];
this.selectedTeam = actors;
this.selectedTeamPlayers = actors.Players;
this.gameEvent = event;
this.selectedValue = player;
selections.push({
EventId: this.gameEvent.EventId,
ActorId: this.selectedTeam.ActorId,
EventActorId: this.selectedTeam.EventActorId,
Score: 1,
Position: 1,
PlayerPosition: this.player.Position,
PlayerPoint: this.player.Point,
});
this.playerSelections = selections;
}
My Data:
groupSelections = [
{
"PromotionId": 5,
"Events": [
{
"Actors": [
{
"ActorId": 33,
"ActorName": "Italy",
"Players": [
{
"Name": " Mattia De Sciglio (D)",
"Position": "DEFENDER",
"Point": 5
},
{
"Name": "Bryan Cristante (M)",
"Position": "MIDFIELDER",
"Point": 3
}
]
},
{
"ActorId": 34,
"ActorName": "Turkey",
"Players": [
{
"Name": " Zeki Çelik (D)",
"Position": "DEFENDER",
"Point": 5
},
{
"Name": "Ozan Tufan (M)",
"Position": "MIDFIELDER",
"Point": 3
}
]
}
]
},
{
"Actors": [
{
"ActorId": 77,
"ActorName": "Slovakia",
"Players": [
{
"Name": "Mattia Perin (G)",
"Position": "GOALKEEPER",
"Point": 10
},
{
"Name": "Bryan Cristante (M)",
"Position": "MIDFIELDER",
"Point": 3
}
]
},
{
"ActorId": 78,
"ActorName": "Sweden",
"Players": [
{
"Name": " Zeki Çelik (D)",
"Position": "DEFENDER",
"Point": 5
},
{
"Name": "Ozan Tufan (M)",
"Position": "MIDFIELDER",
"Point": 3
}
]
}
]
}
]
}

Answer 1

Usually you should add a selected field to your Players object. Then you can set it to true and consider it when adding the additional class.
But let's do it with a simple array first.
TS file
selectedPlayers: Array<string> = [];
// check whether the players object is in the list
isSelectedPlayer(players: any): boolean {
return this.selectedPlayers.findIndex(element => element === players) > -1;
}
getSelections(actors, event, selectedOption, player): any {
const selections = [];
this.selectedTeam = actors;
this.selectedTeamPlayers = actors.Players;
this.gameEvent = event;
// add the selection to your list, if is not in it
if (this.selectedPlayers.findIndex(element => element === player) === -1) {
this.selectedPlayers.push(player);
}
selections.push({
EventId: this.gameEvent.EventId,
ActorId: this.selectedTeam.ActorId,
EventActorId: this.selectedTeam.EventActorId,
Score: 1,
Position: 1,
PlayerPosition: this.player.Position,
PlayerPoint: this.player.Point,
});
this.playerSelections = selections;
}
HTML
<div [className]="gameEvent == event && isSelectedPlayer(team?.Players) ? 'selected':''">