Angular Like Counter - html

Question

I wish to make a counter of like on Angular. If there is more like than disklike the square is green and vice versa (see stackblitz link).
Link:
enter link description here
My code seems fair, I debugg with consol.log and alert but without success.
If you can help me, give me advice and enlighten me it would be a great help.
Thank you in advance,
Valentin

Answer 1

Along with the code link, please try providing the question code in your question itself.
In your code if you would modify your result() method to this, you would get the desired output:
result() {
if (this.nbrLove > this.nbrDontLove) {
return 'green';
} else if (this.nbrLove < this.nbrDontLove) {
return 'red';
}
}
Also, there is no need of returning values from nbrL() and nbrD() methods.
As methioned out in a comment by #Ploppy if would bind a variable to the tenplate, it will be more effecient.
You can do this by calling result() in both nbrL() and nbrD() and binding the background style with a class variable:
export class AppComponent {
nbrLove = 0;
nbrDontLove = 0;
bckColor = 'white'
nbrL() {
this.nbrLove = this.nbrLove + 1;
this.result()
}
nbrD() {
this.nbrDontLove = this.nbrDontLove + 1;
this.result();
}
result() {
if (this.nbrLove > this.nbrDontLove) {
this.bckColor = 'green';
} else if (this.nbrLove < this.nbrDontLove) {
this.bckColor = 'red';
}
else {
this.bckColor = 'white';
}
}
}
<div
[ngStyle]="{'width': '20px',
'height': '20px',
'background-color': bckColor}">
https://stackblitz.com/edit/angular-catcjl?file=src%2Fapp%2Fapp.component.html