Obtaining attribute data value upon selection change in Angular 4

Question

Obtaining attribute data value upon selection change in Angular 4

Having trouble retrieving the value from data-somedata in my code...

<select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (change)="menuChange($event)">
  <option *ngFor="let menu_optional of menu_optionals" value="{{ menu_optional.id }}" [attr.data-somedata]="menu_optional.id">{{ menu_optional.name }}</option>
</select>

In my component.ts, I have:

menuChange(event) {
    console.log(event.data);
}

However, the return is undefined. I'm looking to retrieve the value stored in data-somedata attribute.

angular typescript

Answer 1

Answer №1

If the value of attr.data-some-data matches value, you can streamline your code like this:

console.log(event.target.value);

If you specifically need to access the data attribute, then consider using the following snippet:

const selectEl = event.target;

const val = selectEl.options[selectEl.selectedIndex].getAttribute('data-somedata');
// or
const val = selectEl.options[selectEl.selectedIndex].dataset.somedata;

Answer 2

If the value of attr.data-some-data matches value, you can streamline your code like this:

console.log(event.target.value);

If you specifically need to access the data attribute, then consider using the following snippet:

const selectEl = event.target;

const val = selectEl.options[selectEl.selectedIndex].getAttribute('data-somedata');
// or
const val = selectEl.options[selectEl.selectedIndex].dataset.somedata;

Answer 3

Answer №2

Consider implementing it in this manner:

Instead of using (change), try substituting it with (ngModelChange)

<select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (ngModelChange)="menuChange($event)">
  <option *ngFor="let menu_optional of menu_optionals" [value]=" menu_optional.id" [attr.data-somedata]="menu_optional.id">{{ menu_optional.name }}</option>
</select>

Answer 4

Consider implementing it in this manner:

Instead of using (change), try substituting it with (ngModelChange)

<select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (ngModelChange)="menuChange($event)">
  <option *ngFor="let menu_optional of menu_optionals" [value]=" menu_optional.id" [attr.data-somedata]="menu_optional.id">{{ menu_optional.name }}</option>
</select>

Answer 5

Answer №3

For those utilizing MatSelect from Angular material version 1 or higher along with Reactive forms, the following solution proved effective for me:

HTML Code:

<mat-form-field class="full-width">
    <mat-select placeholder="Field 1" 
      [formControl]="form.controls['field1']" 
      (change)="dropDownChange($event)">
      <mat-option *ngFor="let fieldOpt of fieldOpts.options" [attr.data-fieldId]="fieldOpts.fieldId" [value]="fieldOpt.id">{{ fieldOpt.name }}</mat-option>
    </mat-select>
</mat-form-field>

Component JavaScript:

dropDownChange(event) {
    let target = event.source.selected._element.nativeElement;
    let selectedData = {
      fieldId: target.getAttribute('data-fieldId'),
      valueId: event.value,
      value: target.innerText.trim()
    };
    console.log(selectedData);
}

If there is a better solution or any flaws in this approach, please do not hesitate to inform me as I am keen on learning more :-)

Answer 6

For those utilizing MatSelect from Angular material version 1 or higher along with Reactive forms, the following solution proved effective for me:

HTML Code:

<mat-form-field class="full-width">
    <mat-select placeholder="Field 1" 
      [formControl]="form.controls['field1']" 
      (change)="dropDownChange($event)">
      <mat-option *ngFor="let fieldOpt of fieldOpts.options" [attr.data-fieldId]="fieldOpts.fieldId" [value]="fieldOpt.id">{{ fieldOpt.name }}</mat-option>
    </mat-select>
</mat-form-field>

Component JavaScript:

dropDownChange(event) {
    let target = event.source.selected._element.nativeElement;
    let selectedData = {
      fieldId: target.getAttribute('data-fieldId'),
      valueId: event.value,
      value: target.innerText.trim()
    };
    console.log(selectedData);
}

If there is a better solution or any flaws in this approach, please do not hesitate to inform me as I am keen on learning more :-)

Answer 7

Answer №4

In Angular material versions above 7

Component.ts

menuChange(event) {
// This method gets the current Host DOM element
console.log(event.option._getHostElement().getAttribute('data-somedata'));
}

Answer 8

In Angular material versions above 7

Component.ts

menuChange(event) {
// This method gets the current Host DOM element
console.log(event.option._getHostElement().getAttribute('data-somedata'));
}

Obtaining attribute data value upon selection change in Angular 4

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

ngx-bootstrap encountered an issue: TypeError - _co.openModal is unavailable as a function

"Convert a date string to a date object using the verbose moment date

In Typescript, is it correct to say that { [key: string]: any } is identical to { [key: number]: any }?

Having trouble retrieving information from the API in Angular

Refreshing manually will display only the JSON data

Guide to integrating global interfaces into your Nuxt project

Retrieving routing information from directives within angular2

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

Issue with res.redirect not properly redirecting to https site

Angular 2: It is essential to have a distinct instance for Signature Pad

Pressing the confirm button will close the sweet alert dialog

Currency symbol display option "narrowSymbol" is not compatible with Next.Js 9.4.4 when using Intl.NumberFormat

Steps for exporting various elements from a .vue file

Optimizing the SiteMap.xml for Angular 6: How to Choose the Right Strategy?

Utilizing a single route guard for multiple routes with varying authorization requirements

Is there a way to efficiently load the json files only upon clicking the corresponding language button?

Encountering a value accessor error when attempting to test a simple form in Angular 4 and Ionic 3

`Angular2 - exploring the complexities of function scope`

Set up Angular library by downloading from a specified local or network location

Tips for ensuring session token verification remains intact upon reloading