Cannot find name 'srcElement'

Question

I have 2 buttons for votting, on click I call a methed "onWhich" that compares the number of up and down clicks and depending on the result the background-color changes

but the editor is showing Cannot find name 'srcElement'

maybe my method is incomplete....

yes= 0;
no = 0;

  constructor() { }

  ngOnInit() {
  }


onYes(index: number){
this.yes ++;
this.onWhich();
}

onNo(index: number){
this.no ++;
this.onWhich();
}

onWhich(){
  if(this.yes > this.no){
    srcElement.parentElement.style.backgroundColor = 'blue';
  }else if(this.yes < this.no){
    srcElement.parentElement.style.backgroundColor = 'red';
  }else{
    srcElement.parentElement.style.backgroundColor = 'white';
  }

}

here is the template

<ul class="list-group">
    
   <li class="list-group-item" *ngFor="let post of posts; let i = index"> 


      <p style="font-size:35px;"> {{  post.title }} 
      
                   
   <button class="btn btn-success"  (click)="onYes(i)" >Love it!</button> &nbsp;
   <button class="btn btn-danger" (click) ="onNo(i)">Don't love it!</button> <br>


    </li>    
        
 </ul> 

Answer 1

You can make use of template reference variables when it comes to referencing to the DOM element on your template/component.html.

First, we use the # character to declare the template reference variables for both buttons.

<ul class="list-group">    
  <li class="list-group-item" *ngFor="let post of posts; let i = index"> 
    <p style="font-size:35px;"> {{  post.title }} 
    <button class="btn btn-success"  (click)="onYes(i)" #buttonYes>Love it!</button> &nbsp;
    <button class="btn btn-danger" (click) ="onNo(i)" #buttonNo>Don't love it!</button> <br>
  </li>    
</ul> 

And on you component.ts, we use @ViewChildren to access the list of reference variables within the ngFor. We will also pass the index of the clicked button to the methods binded to the click events. This will allow the component logic to access the index which is clicked, thus using the index to provide the references for the index of the element within the QueryList.

Do note that we have to use the .ToArray() to return a copy of the result from QueryList as an array, so that we can access the each element within the QueryList via its index. For more details regarding the usage of QueryList, feel free to refer to the documentation.

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';
.
.
posts = [{
 title: 'AAA',
 yes: 0,
 no: 0 
},{
 title: 'BBB',
 yes: 0,
 no: 0 
}, {
 title: 'CCC',
 yes: 0,
 no: 0  
}];

onYes(index: number){
  this.posts[index].yes++;
  this.onWhich(index);
}

onNo(index: number){
  this.posts[index].no++;
  this.onWhich(index);
}

onWhich(index: number){
  const parentNode = this.buttonYes.toArray()[index].nativeElement.parentNode;
  if (this.posts[index].yes > this.posts[index].no) {
    parentNode.style.backgroundColor = 'blue';
  } else if (this.posts[index].no > this.posts[index].yes) {
    parentNode.style.backgroundColor = 'red';
  } else{
    parentNode.style.backgroundColor = 'white';
  }    
}

I have created a demo.

---

Alternatively, the better solution is to use ngClass, whereby the classes .list-group-item-success and .list-group-item-danger are conditionally applied based on the number of yes and no votes for each post.

<ul class="list-group">    
  <li class="list-group-item" *ngFor="let post of posts; let i = index"> 
    <p [ngClass]="{
      'list-group-item-success': post.yes > post.no,
      'list-group-item-danger': post.yes < post.no}" style="font-size:35px;"> {{  post.title }} 
      <button class="btn btn-success"  (click)="onYes(i)" #buttonYes>Love it!</button> &nbsp;
      <button class="btn btn-danger" (click) ="onNo(i)" #buttonNo>Don't love it!</button> 
    </p>
  </li>    
</ul> 

And on the component.css, we define the classes required.

.list-group-item-success {
  background-color: blue;
}

.list-group-item-danger {
  background-color: red;
}

DEMO.

Answer 2

I would go the same route as wentjun with adding properties yes and no, but I wouldn't manipulate the DOM from the TS file, instead we can use ngClass and apply style classes. Let's say classes like:

.blue-bg {
  background-color: blue;
}

.red-bg {
  background-color: red;
}

.white-bg {
  background-color: white;
}

If you have an existing array of posts, you can add the new properties with:

this.posts = this.posts.map(post => { return {...post, yes: 0, no: 0} });

Then add the click handlers for the button like wentjun and pass the index:

<button (click)="onYes(i)">Love it!</button>
<button (click) ="onNo(i)">Don't love it!</button>

And the corresponding functions:

onYes(i: number){
  this.posts[i].yes++;
}

onNo(i: number){
  this.posts[i].no++;
}

Then mark in the template with conditions in ngClass:

[ngClass]="[post.yes > post.no ? 'blue-bg' : '',  
            post.yes < post.no ? 'red-bg' : '', 
            post.yes === post.no ? 'white-bg' : '']"

DEMO: Stackblitz (which I kindly forked from wentjuns stackblitz)