Hi!

In this post I will try to create reusable likes count component in Angular. I will also show how to setup the project from scratch.

Project setup

First we will need to install Angular CLI, this will help us to automate creating components. For this we use command in our console.

npm install -g @angular/cli

Next we need to create new Angular project, for this we can use Angular CLI command. We will name our application likes-app.

ng new likes-app

Accept the defaults by pressing the Enter or Return key.

Run the application

Now we can navigate to our application and open it in the browser.

cd likes-app
ng serve --open

The --open (or just -o) option automatically opens your browser to localhost:4200

If you did everything right, you should see something like this in your browser.

We can edit this generated markup going into app/app.component.html

For now I will only display Hello World!. So we can delete everything and add.

<p>Hello World!</p>

Create new component

Next we can create our likes component again using Angular CLI. With command like below our new component will be created. I used shortcuts g stands for generate and c for component.

ng g c likes

Angular CLI did all the work for us with creating this component. Also automatically it was added to our app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { LikesComponent } from './likes/likes.component';

@NgModule({
  declarations: [
    AppComponent,
    LikesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We can test if our component is working properly. If you open ts file of our new component which is in app/likes/likes.component.ts you will see this markup.

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

@Component({
  selector: 'app-likes',
  templateUrl: './likes.component.html',
  styleUrls: ['./likes.component.css']
})
export class LikesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

Here we need to take selector which we will use in our app.component.html. So we just copy app-likes. And we go to our app/app.component.html file where we previously typed Hello World!.

To use our component we use the selector that we copied moment ago.

<p>Hello World!</p>
<app-likes></app-likes>

In our browser we should see now two lines of text.

Hello World!

likes works!

Likes component logic

Okay now we can implement logic that will operate our component. For that we open app/likes/likes.component.ts

We can clean the code a litte bit and remove unused elements. Next we will declare two variables. First likescount will count our likes and likeclicked will check if like button was already clicked.

Inside our updateLikesCount function we add or substract 1 basing on likeclicked value that can be true or false.

Next we change likeclicked to its opoosite value. And we have our logic ready.

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

@Component({
  selector: 'app-likes',
  templateUrl: './likes.component.html',
  styleUrls: ['./likes.component.css']
})
export class LikesComponent {

  likescount: number = 0;
  likeclicked: boolean = false;

  updateLikesCount(){
    this.likescount += (this.likeclicked) ? -1 : 1;
    this.likeclicked = !this.likeclicked;
  }
}

HTML component markup

Inside our likes.component.html we add following markup. This {{ }} interpolation will allow us to display our likescount variable from our component. Also we bind click event to call our updateLikesCount function.

<div class="wrap">
  <div class="likescount">{{ likescount }} </div>
  <button (click)="updateLikesCount()">Like</button>
</div>

Now we should have something looking like this, when we click Like button our counter should change to 1 and then if we click again counter should go back to 0.

Beautification

Lets now make our button more presentable. Maybe we can try to recreate heart similar to social media apps nowadays.

For this we will need to add font awesome icons. We can start by installing it with console command like below.

npm install font-awesome --save

We have to add link to our font awesome in our angular.json

"styles": [
              "node_modules/font-awesome/css/font-awesome.css",
              "src/styles.css"
            ],

It is good to reload our app using ng serve at this point.

Next we go to our likes.component.html to add our icon.

<div class="wrap">
  <div class="likescount">{{ likescount }} </div>
  <a (click)="updateLikesCount()">
    <i class="fa fa-heart" aria-hidden="true" [ngClass]="likeclicked ? 'active' : ''"></i>
  </a>
</div>

I changed also button to anchor tag. To our icon I added ngClass directive to check our likeclicked value and basing on that toggle active class.

.active{
  color: rgb(250, 73, 73);
}

Now we should have our Like icon looking like this. Photo below shows two stages, clicked and not clicked.

If you find any mistakes or you have ideas how to refactor my solutions to be simplier/ better please let me know :)