How to get element reference name in angular 8

Question

Tried to get element reference name but not working.If anyone know please help to find the solution.

alert should be like container.Because that is element reference.

app.component.html:

<div (click)="test(event)" #container></div>

app.component.ts:

test(e){
   alert(e.elementRef);
   //Output should be like alert("container");
}

Answer 1

As Kamil Augustyniak wrote in his comment, use $event instead of event in your div element.

<div (click)="test($event)" #container></div>

The test method in your component class will be invoked with a MouseEvent and you can obtain a reference to the HTML element from its target, srcElement or currentTarget property (depends on browser).

test(event: MouseEvent): void {
   const htmlElement = event.target || event.srcElement || event.currentTarget;;
   ...
}

Note however that #container in your div element is an Angular template reference variable that is commonly used together with a @ViewChild decorator.