Angular - add custom (data) attribute to

Question

I need to add custom data attribute to select options. I want it because on change I want to trigger action based on selected attribute (not value)

Here is the code I am using

<select (domChange)="onListUpdate($event)" formControlName="region" id="region" class="selectric form-control">
    <option code="" value="-1">{{ 'select_country' | translate }}</option>
    <option data-isocode="{{region.iso_code}}" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>
</select>

It works when I give static value to data attribute for example, the following works without any problem (notice the data-isocode has static value)

<option data-isocode="abc" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>

However, when I try to use the variable in data-isocode

<option data-isocode="{{region.iso_code}}" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>

It throws me following error

Can't bind to 'isocode' since it isn't a known property of 'option'

How do I pass the data attribute (like in jQuery) with Angular and get the value using FormBuilder?

Can you try binding like `[attr.data-isocode]="region.iso_code"` this? — Rajshri Mohan K S, Jan 22 '19 at 04:49
Possible duplicate of [How to bind to data-\* attribute in angular2?](https://stackoverflow.com/questions/34412103/how-to-bind-to-data-attribute-in-angular2) — Rajshri Mohan K S, Jan 22 '19 at 04:53
Working, thanks, how do I access the value in .ts file using FormBuilder? — Ibrahim Azhar Armar, Jan 22 '19 at 04:54
@IbrahimAzharArmar You can get it via a `@ViewChild` binding with the element. But I don't understand. If you are binding a variable/property like `region.iso_code` did it not come from the `.ts` in the first place? — Rajshri Mohan K S, Jan 22 '19 at 04:56
Or perhaps, you are looking at something like this? https://stackoverflow.com/a/50582487/4050218 — Rajshri Mohan K S, Jan 22 '19 at 04:59
@RajshriMohanKS I am using `formControlName` for binding, and accessing the whole form values using `this.form.value` — Ibrahim Azhar Armar, Jan 22 '19 at 04:59
@IbrahimAzharArmar `this.form.value` gives the "value" elements only. You have to override the `value` with your data attribute value onChange if you want to access it there. But it'll be a roundabout way of getting things done. — Rajshri Mohan K S, Jan 22 '19 at 05:03
@RajshriMohanKS, would you mind posting your comment as answer? I will accept it. — Ibrahim Azhar Armar, Jan 22 '19 at 05:20

score 7 · Accepted Answer · answered Jan 22 '19 at 06:31

You can bind to the data- attributes like this:

[attr.data-isocode]="region.iso_code"

You can access the value through an event binding like:

getData(event){
  console.log(event.target.dataset.isocode);
}

Accessing it via this.form.value is not possible though since this.form.value gives the "value" elements only. You have to override the value with your data attribute value onChange if you want to access it there. But it'll be a roundabout way of getting things done.

Angular - add custom (data) attribute to using ngFor

1 Answers1

Angular - add custom (data) attribute to