Angular click event on component send inner element as target

Question

I have a click event on an Angular component:

import { Component } from "@angular/core";

@Component({
  template: `
    <hello (click)="onClick($event)"></hello>
  `
})
export class AppComponent {
  onClick(e) {
    alert("Click on TAG: " + e.target.tagName);
  }
}

See demo online: https://stackblitz.com/edit/angular-ivy-zxmsnc?file=src%2Fapp%2Fapp.component.ts

Why is event.target an inner element of the component and not the component itself?

Answer 1

That's because event.target refers to the element that triggered the event.

I think you're looking for event.currentTarget which refers to the element that the event listener is attached to.