Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to all icons simultaneously. I'm trying to make it so that the SCSS class only applies to the specific icon I clicked on.
Any help is appreciated.
HTML
<div class="image-mosaic">
<div class="card" *ngFor="let film of films">
<img [src]="film.img" class="img-style">
<div class="icon-style">
<mat-icon (click)="addFavoris(film); $event.stopPropagation()" [ngClass]="{'rouge': film.favoris == true}">
favorite_border
</mat-icon>
</div>
</div>
</div>
TS
export class TemplateListComponent {
public showFiller = false;
@Input() public films: MovieListe[];
@Output() public favoris = new EventEmitter();
addFavoris(favoris: MovieListe) {
this.showFiller = !this.showFiller;
let t: MovieListe = { ...favoris };
t.favoris = this.showFiller;
this.favoris.emit(t);
}
}
JSON
{
"id": 1,
"title": "Smile",
"rating": 2,
"releaseDate": "12/02/2010",
"img": "assets/img/film.jpg",
"favoris": true
},