Angular2 - How to access value stored in data attributes

Question

This may have been asked, but i've tried googling for sometime without having getting any solution.

I have the following select field in Angular2, how do i access the stored value in the data attribute of attr.data-thisdata?

<select #dial">
   <option *ngFor="let something of somethings"
     [value]="something.value" 
     [attr.data-thisdata]="something.data"
   >{{something.text}}</option>
</select>

I have tried the following but not getting any values:

<select (change)="readData($event.target.dataset)>...<select>
<select (change)="readData($event.target.dataset.thisdata)>...<select>

My readData is simply:

readData(data:any){
    console.log(data)
}

EDIT 1: added plunker for ease of reference

EDIT 2: included plunker from Günter's answer

Tim Morgan · Accepted Answer · 2017-08-11 16:14:25Z

4

To answer the original question of how to access a data attribute of an option element through a select element's event, use:

event.target[event.target.selectedIndex].dataset.thisdata

The reason event.target.dataset.thisdata does not work is the data attribute actually belongs to the option, but the event here is coming from the select element. We can access the selected option by using the select's selectedIndex property.

answered Aug 11, 2017 at 16:14

Tim Morgan

515 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-11-10 09:42:35Z

1

With [ngValue] instead of value you can assign an object instead of only a string.

<select #dial" ngModel (ngModelChange)="$event.data">
   <option *ngFor="let something of somethings"
     [ngValue]="something" 
     [attr.data-thisdata]="something.data"
   >{{something.text}}</option>
</select>

Plunker example

edited Nov 10, 2016 at 9:42

answered Nov 10, 2016 at 9:01

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

5 Comments

Sean W Over a year ago

but something is only defined in the <option *ngFor="let something of somethings">?

Sean W Over a year ago

it's not working, i added readData to your (ngModelChange)="$event.data i get undefined..

Günter Zöchbauer Over a year ago

Can't imagine. Can you reproduce in a Plunker?

Sean W Over a year ago

yep, added the plunker

Sean W Over a year ago

ok, i got it now, with ngValue and having assigned an object to it, there wont be a need to use data attribute right?

Collectives™ on Stack Overflow

Angular2 - How to access value stored in data attributes

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related