Angular2 - detect the name of focused DOM element

Question

I have a bunch of elements on the page and I need to detect the name of the selected element.

Example:

<select (click)="functionDetectName()" name="test1">
<select (click)="functionDetectName()" name="test2">
<select (click)="functionDetectName()" name="test3">

functionDetectName() {
console.log("What to put here to detect the name of the select element?");
}

So, when I click on the test1 select box, console log should output: test1, when on test2, it should output test2.

Answer 1

You can pass $event to your functionDetectName() function and then get attribute name from passed data, for example:

<select (click)="functionDetectName($event)" name="test1">
<select (click)="functionDetectName($event)" name="test2">
<select (click)="functionDetectName($event)" name="test3">

functionDetectName(event: MouseEvent) {
    console.log(event.srcElement.name);
}

Answer 2

You can just pass the name like

<select (click)="functionDetectName('test1')" name="test1">

or if you really want the attribute you can do

<select #self (click)="functionDetectName(self.getAttribute('name'))" name="test1">