使用 Class 向元素添加 eventListener

Question

i have this challenge and i cant figure out how can i implement a function to get the click event on the squares. I want to get the click event on every button with square class.

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

@Component({
  selector: 'app-area',
  template: `
    <div id="statusArea" className="status">Next player: <span>X</span></div>
    <div id="winnerArea" className="winner">Winner: <span>None</span></div>
    <button id="reset">Reset</button>
    <section>
      <div class="row" *ngFor="let row of [1, 2, 3]">
        <button *ngFor="let col of [1, 2, 3]" class="square" style="width:40px;height:40px;"></button>
      </div>
    </section>
  `,
  styles: []
})

export class MainAppComponent implements OnInit {

  ngOnInit() { 
    const btn = document.getElementById('reset')
    const squares = Array.from(document.querySelectorAll('.square'))

    squares.forEach(square =>{
      square.addEventListener('click', function handleClicks(event){
        console.log('botão clicado');
      })
    })

    btn.addEventListener('click', function handleClick(event){
      console.log("clicado");
    })
  }
}

Answer 1

Just to make sure that this is clear: You shouldn't be poking around with the DOM in Angular.

The framework already provides mechanisms for Adding Events, Properties Binding and HTML selection (among dozens of more things)

In your case, you were trying to add the click event manually, but the framework got you covered by simply adding the (click)="onSquareClick()" to your button element in the template.

<button *ngFor="let col of [1, 2, 3]" class="square" style="width:40px;height:40px;" (click)="onSquareClick()"></button>

If you really need to play with the DOM, Angular introduces the concept of Directives together with a few utilities that can be handy in such scenarios.
Here you can find some examples