Imagine a page filled with project cards, each equipped with a favorite button. Clicking the button will mark the project as a favorite and change the icon accordingly.
The issue arises when clicking on the favorite button causes all project cards to reset and the favorite icon remains unchanged. Below is a snippet of code for reference:
project-carousel.component.html
<app-project-card *ngFor="let project of projects" [project]="project" [isFavorite]="isFavorite(project.id)"></app-project-card>
project-card.component.html
<div class="project-fav-btn" (click)="favorite()">
<i [ngClass]="{'fas':isFavorite, 'far':!isFavorite}" class="fa-heart"></i>
</div>
project-card.component.ts
export class ProjectCardComponent implements OnInit {
@Input() project: Proje;
@Input() isFavorite: boolean;
constructor(private favoriteService: FavoriteService) {
}
ngOnInit(): void {
}
favorite(): void {
if (this.isFavorite) {
this.favoriteService.deleteFavorite(this.project.id);
} else {
this.favoriteService.addFavorite(this.project.id);
}
this.isFavorite = !this.isFavorite;
}
}
If you have any suggestions on how to address this issue or approach it differently, please share them.