CODEWITHSUNDEEP
angular
Allan Rodsmith
Allan Rodsmith

Reputation: 61

How to pass option id on select in Angular?

I have a select control, and I'd like it to pass the id of the selected option when the option changes, but can't figure out how to do that.

<select id="companydropdown" (change)="getcompanyid($event)">
<option *ngFor="let company of filteredCompanies" value={{company.companyName}} 
id={{company.id}}>
{{company.companyName}}
</option>
</select>

Upvotes: 1

Views: 8364

Answers (5)

Faouzi
Faouzi

Reputation: 1019

You can use :

Component.html

<select id="companydropdown" (change)="getcompanyid($event)">
  <option *ngFor="let company of filteredCompanies" value="{{company.id}}">
    {{company.companyName}}
  </option>
</select>

Component.ts

getcompanyid(e){
    console.log(e.target.value)
}

Upvotes: 0

Mehul Jain
Mehul Jain

Reputation: 1

This should give you the id on the change event handler event.currentTarget.options[event.currentTarget.options.selectedIndex].id

Upvotes: 0

fidelio
fidelio

Reputation: 81

The best way to do this is by using ReactiveFormsModule. First, you need to declare the FormBuilder controllers to set up, then an array of your elements (options), as in this example:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  isSubmitted = false;

  // City Names
  City: any = ['Florida', 'South Dakota', 'Tennessee', 'Michigan', 'New York']

  constructor(public fb: FormBuilder) { }

  /*########### Form ###########*/
  registrationForm = this.fb.group({
    cityName: ['', [Validators.required]]
  })

  // Getter method to access formcontrols
  get cityName() {
    return this.registrationForm.get('cityName');
  }

  /*########### Template Driven Form ###########*/
  onSubmit() {
    this.isSubmitted = true;
    if (!this.registrationForm.valid) {
      return false;
    } else {
      alert(JSON.stringify(this.registrationForm.value))
    }

  }

}

Then you can iterate your options at template:

<select class="custom-select" (change)="changeCity($event)" formControlName="cityName">
   <option value="" disabled>Choose your city</option>
   <option *ngFor="let city of City" [ngValue]="city">{{city}}</option>
</select>

Here's a nice and full tutorial for your needs: https://www.positronx.io/angular-7-select-dropdown-examples-with-reactive-forms/

Please, also read the documentation to better understand ReactiveForms, maybe it takes some more minutes but worth it: https://angular.io/guide/reactive-forms

Upvotes: 1

Ashish Patel
Ashish Patel

Reputation: 345

You can access the selected value using "$event.target.value". For that the expected value must be assigned to the "value" property of "" tag.

<select id="companydropdown" (change)="getcompanyid($event.target.value)">
  <option *ngFor="let company of filteredCompanies" value="{{company.id}}">
    {{company.companyName}}
  </option>
</select>

Notice the changes in event handler and

See the stackblitz for full example: https://stackblitz.com/edit/select-option-to-event

Upvotes: 2

Vlad Vidac
Vlad Vidac

Reputation: 998

Pass it where? Like instead of the companyName? What gets passed is the option value, you just need to change the value to be the id:

<select id="companydropdown" change="getcompanyid($event)">
   <option *ngFor="let company of filteredCompanies" value={{company.id}} id={{company.id}}>
      {{company.companyName}}
   </option>
</select>

Upvotes: 0

Related Questions