Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

1.9K
Views
Codility like button angular

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;
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!