Codility like button angular

Question

Hi I have a problem with the codility exercises on the square, I am trying to do something 2 days and nothing anyone has a solutions

Build a like button component using Angular (v4). Export the like button component as "LikeButtonComponent" (export class LikeButtonComponent).

Requirements:

There should be a like button: The content of the like button should be in the following format: "Like | 100", where 100 is the total number of likes. It should have a "like-button" class. Wrap the number of likes in a span with a "likes-counter" class. The initial number of likes in the counter should be 100.

Users can add a like. By clicking the button: The number of likes should increase by one. Like button should have "liked" class in addition to the "like-button" class.

Users can undo their like by clicking again on the button: The counter should decrease by one. "liked" class should be removed.

And code

import { Component, Injectable } from '@angular/core';

@Component({
    selector: 'like-button',
    template: `
        <h2>
          <span
  ><button (click)="buttonCliked()">Like |{{ likebutton.likeCounter }}</button></span
>
        </h2>
    `,
    styles: [`
        .like-button {
            font-size: 1rem;
            padding: 5px 10px;
            color:  #585858;
        }

        .liked {
            font-weight: bold;
            color: #1565c0;
        }
    `]
})

export class LikeButtonComponent {

  public likeCounter = 100;

  constructor(private likeButton: LikeButton, private liked: Liked) {}

  buttonCliked(): void {
    this.changeLikeNumber();
    this.toggleLike();
  }

  private toggleLike(): void {
    this.liked.isLiked = !this.liked.isLiked;
  }

  private changeLikeNumber(): void {
    if (!this.liked.isLiked) {
      this.likeCounter = this.likeButton.increment(this.likeCounter);
    } else {
      this.likeCounter = this.likeButton.decrement(this.likeCounter);
    }
  }
}

export class LikeButton {
  constructor(private liked: Liked) {}
  increment(likeCounter: number) {
    likeCounter++;

    return likeCounter;
  }
  decrement(likeCounter: number) {
    likeCounter--;
    return likeCounter;
  }
}

export class Liked {
  isLiked = false;
}

Answer 1

You have to use some Angular tools such as ngClass to add dynamic class based on user clicked. Also, it will be done in one function based on the condition of the user has already liked the button or not:

Working stackblitz example

Code:

import { Component, Injectable } from '@angular/core';

@Component({
    selector: 'like-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.css']
})

export class ButtonComponent {
  likeCount= 100;
  isLiked = false;
  
  likeTheButton = () => {
    if(this.isLiked)
    this.likeCount--;
    else
    this.likeCount++;

    this.isLiked = !this.isLiked
  }
}

.like-button {
  font-size: 1rem;
  padding: 5px 10px;
  color: #585858;
}

.liked {
  font-weight: bold;
  color: #1565c0;
}

 <button class="like-button" [ngClass]="{'liked':isLiked}" (click)="likeTheButton()">
  Like | <span class="like-counter">{{ likeCount }}</span>
</button>