Likes/DisLikes Example with Angular

Step 1:

Download and Install Latest Node.js

URL : https://nodejs.org/en/download/

Step 2:

Install Visual Studio Code  (URL:  https://code.visualstudio.com/download)

Step 3:

Install Angular CLI Using the command 

npm install -g @angular/cli

Create a new Angular Application

Create a New Folder in your System (D:\\AngularApp)

Open folder using Visual Studio Code

Open Terminal Using the Ctrl + ` Type the below Command

ng new cars-demo

Below is the folder Structure you will be seeing.

ng g c carsdemo --spec=false

Now you can see the below files gets created in the folder  src\app as shown below

cars-demo.component.ts

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

@Component({

  selector: 'app-cars-demo',

  templateUrl: './cars-demo.component.html',

  styleUrls: ['./cars-demo.component.css']

})

export class CarsDemoComponent implements OnInit {

  constructor() { }

  public cars = [

    {carName: 'Audit', Photo: 'assets/Audit.Jpg', Likes: 0, DisLike: 0},

    {carName: 'Benz', Photo: 'assets/Benz.Jpg', Likes: 0, DisLike: 0}

    ];

  ngOnInit() {

  }

  public LikesCounter(car)

  {

    car.Likes++;

  }

  public DisLikesCounter(car)

  {

    car.DisLike++;

  }

}

cars-demo.component.html

<div align="center" *ngFor="let carobj of cars">

  <h3> {{ carobj.carName }} </h3>

  <img [src]="carobj.Photo" border="1" width="200" height="200" >

  <br/>

  {{carobj.Likes}} |  {{ carobj.DisLike}}

  <br/>

<a href="#" >

  <img src="assets/Like.Jpg" width="30" height="30" (click)="LikesCounter(carobj)" >

</a>

<span>  | </span>

<a href="#" >

  <img src="assets/DisLike.Jpg" width="30" height="30" (click)="DisLikesCounter(carobj)" >

</a>

</div>

Note: Add Images in the Asset Folder for displaying of Image as shown below

Now Go to app.module.ts(To make cars binding Component Run we need to make the following Changes)

Now Go to Index Page in the folder and make the below changes.

Output:

Go to Terminal And Type the Command 

ng s