To start, make sure your HTML list is set up properly to handle click events:
HTML
<div *ngFor="let movie of movies">
...
<div class="like" (click)="onLike(movie)">...</div>
<div class="dislike" (click)="onDislike(movie)">...</div>
</div>
The template above allows you to cycle through each movie in the movies array and attach click events to the like and dislike buttons.
Typescript
export class MoviesComponent {
movies: any[] = [
{ name: "Fan", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/fan.jpg" },
{ name: "Airlift", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/airlift.jpg" },
{ name: "Wazir", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/wazir.jpg" },
{ name: "Neerja", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/neerja.jpg" },
{ name: "Bajirao mastani", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/bajirao.jpg" }
];
onLike(movie) {
// locate the movie in the array
const index = this.movies.indexOf(movie);
// increment the likes for the movie
this.movies[index].likes++;
}
onDislike(movie) {
// locate the movie in the array
const index = this.movies.indexOf(movie);
// increment the dislikes for the movie
this.movies[index].dislikes++;
}
}
By clicking on the buttons, you can increase the likes or dislikes for each movie. Consider assigning a unique id to each movie for safer retrieval from the array.
If you found this information helpful, please let me know!