Here is my Quote class where the up-vote and down-vote properties are initially set to 0
export class Quote {
showDescription: boolean;
upvotes: number;
downvotes: number;
constructor(
public content:string,
public publisher:string,
public author:string,
public datePublished:Date
) {
this.showDescription = false;
this.upvotes = 0;
this.downvotes = 0;
}
}
Displayed below is the HTML button snippet:
<li *ngFor = 'let quote of quotes; let i = index' quotes>
<div class="col-md-6 downvotes">
................
<img src="assets/down-arrow.png" alt="" (click)="downVote(i)">
<span >{{quote.downvotes}}</span>
...................
</div>
</li>
This shows how I'm invoking the downvote function upon clicking the button
import { Component, OnInit } from '@angular/core';
import { Quote } from '../quote'
@Component({
selector: 'app-quote',
templateUrl: './quote.component.html',
styleUrls: ['./quote.component.css']
})
export class QuoteComponent implements OnInit {
............
downVote(index:number) {
this.quotes[index].downvotes -= 1;
.................
}