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

Data Binding Technique using Interpolation in Angular

Interpolation: It is a data binding technique used by angular to bind the model data into any View. It uses angular Data Binding Expression  " { }"

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 databinding

Below is the folder Structure you will be seeing.

Go to that Path and run the below command to create a component using Visual Studio Code

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

data-binding.component.ts

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

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

export class DataBindingComponent  {
  
  public title = 'Product Details';
  public product =
  {
    Name: 'Samsung TV',
    Price: 4500.64,
    Qty: 2,
    Mfd: new Date('2019/02/20'),
    Preview: 'assets/Samsung.JPG'
  };
  public GetTotal() {
    return this.product.Qty * this.product.Price;
}

}

data-binding.component.html 

<H1> Data Binding </H1>
 <h3> {{ title }} </h3>
<dl>
  <dt> Name </dt>
  <dd> {{ product.Name }} </dd>
  <dt> Price </dt>
  <dd> {{ product.Price}}</dd>
  <dt>  Quantity </dt>
  <dd> {{ product.Qty}}</dd>
  <dt> Manufactured Date </dt>
  <dd> {{ product.Mfd.toLocaleDateString() }} </dd>
  <dt> Preview</dt>
  <dd>
    <img src="{{product.Preview}}" width="100" height="100">
  </dd>
  <dt> Total Amount</dt>
  <dd> {{GetTotal() }}</dd>

  </dl>

Note: Add any Image in the Asset Folder for displaying of Image.

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

Now Go to Index Page in the folder

Output:

Go to Terminal And Type the Command 
ng s

Output: