CODEWITHSUNDEEP
angular
Cheesus
Cheesus

Reputation: 13

The ng-click on the button i use to increment a var doesn't work

I'm just starting to learn Angular so i'm a complete noob. I'm trying to increment a value loveIts each time i click on the love button and to decrement it when i click the hate button but for a reason that escapes my understanding it doesn't do anything.

TypeScript:

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

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

  @Input() title: string;
  @Input() content: string;
  @Input() loveIts: number;
  @Input() created_at: Date;

  constructor() {}

  ngOnInit() {}
  getColor() {
    if (this.loveIts > 0) {
      return "green"
    } else if (this.loveIts == 0) {
      return "grey"
    } else {
      return "red"
    }
  }
}

HTML:

<div class="post">
  <div class="header">
    <h2 text-align="left">{{title}}</h2>
    <p id="date">{{created_at | date: "medium"}}</p>
  </div>
  <div class="content">
    <p>{{content}}</p>
  </div>
  <div>
    <button id="love" ng-click="loveIts = loveIts + 1">LOVE IT </button>
    <button id="hate" ng-click="loveIts = loveIts - 1">DON'T LOVE IT !</button>
  </div>
</div>
<br>
<br> {{loveIts}}

Upvotes: 0

Views: 172

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

It should be (eventName)="methodToBeCalledFromComponent(parameters)". Use (click) instead of ng-click

(click)=="loveIts = loveIts + 1"

ng-click was used in AngularJS(1.x) version.

Upvotes: 1

Related Questions