Making like button event independent for each element with unlike functionality, using Angular

Posted on by

I wish to create a Like button that will increase the counter onClick, and decrease the counter on another click.
Since I have a bunch of elements with the like button, I wish them to act separately from each other. Please notice, I’m using a button on the fetched element.

here is my template:

<h1>Liked albums: {{ likesCounter }}</h1>
<div class="wrapper">
  <div class="album-grid">
    <div *ngFor="let album of albums">
      <div
        class="album"        
      >
        <div class="text">
          <h4>{{ album.name }},</h4>
          <button (click)="buttonHandler()">
            <i [className]="isClicked ? 'fas fa-heart' : 'far fa-heart'"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

{{ likesCounter }} is the counter I would like to update.

ButtonHandler() is changing the {{ likeCounter }} value, and changing the style of the icon, when it’s cliked.
Here is the .ts code:

likesCounter: number = 0;

isClicked: boolean = false;

  buttonHandler = () => {
     this.likesCounter += 1
    this.isClicked = true;
   
  };

In general, 2 things I want to do here is:

  1. Unlike the album if the same button was clicked twice.
  2. Make albums act separate from each other

Link to the repo: https://github.com/paslavskyi9roman/Spotilar/tree/dev

Source: Angular Questions