CODEWITHSUNDEEP
angulartypescript
jjj
jjj

Reputation: 2672

Angular2 - detect the name of focused DOM element

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.

Upvotes: 3

Views: 91

Answers (2)

Stefan Svrkota
Stefan Svrkota

Reputation: 50633

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);
}

Upvotes: 3

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657376

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">

Upvotes: 1

Related Questions