Binding select element to object in Angular

Question

I d like to bind a select element to a list of objects -- which is easy enough    Component      selector   myApp      template    lt h1 gt My Application lt  h1 gt                 lt select   ngModel    selectedValue  gt                    lt option  ngFor   c of countries  value  c id  gt   c name   lt  option gt                 lt  select gt      export class AppComponent      countries             id  1  name   United States            id  2  name   Australia           id  3  name   Canada            id  4  name   Brazil            id  5  name   England               selectedValue   null      In this case  it appears that selectedValue would be a number -- the id of the selected item   However  I d actually like to bind to the country object itself so that selectedValue is the object rather than just the id   I tried changing the value of the option like so    lt option  ngFor   c of countries  value  c  gt   c name   lt  option gt    but this does not seem to work   It seems to place an object in my selectedValue -- but not the object that I m expecting   You can see this in my Plunker example   I also tried binding to the change event so that I could set the object myself based on the selected id  however  it appears that the change event fires before the bound ngModel is updated -- meaning I don t have access to the newly selected value at that point   Is there a clean way to bind a select element to an object with Angular 2

User · Answer

You can do this too without the need to use [(ngModel)] in your <select> tag

Declare a variable in your ts file

toStr = JSON.stringify;

and in you template do this

 <option *ngFor="let v of values;" [value]="toStr(v)">
      {{v}}
 </option>

and then use

let value=JSON.parse(event.target.value)

to parse the string back into a valid JavaScript object

User · Answer

Attention Angular 2  users  for some reason   value  does not work on  elements  use  ngModel  instead   lt select  ngModel   quot selectedCountry quot  gt       lt option  ngFor  quot let country of countries quot   value   quot country quot  gt   country name   lt  option gt   lt  select gt

User · Answer

In app component html     lt select type  number    ngModel    selectedLevel  gt             lt option  ngFor  let level of levels   ngValue   level  gt   level name   lt  option gt           lt  select gt    And app component ts   import   Component   from   angular core     Component     selector   my-app     templateUrl     app component html     styleUrls       app component css       export class AppComponent      levelNum number    levels Array lt Object gt             num  0  name   AA           num  1  name   BB           toNumber        this levelNum    this levelNum      console log this levelNum          selectedLevel   this levels 0      selectedLevelCustomCompare    num  1  name   BB      compareFn a  b        console log a  b  a  amp  amp  b  amp  amp  a num    b num       return a  amp  amp  b  amp  amp  a num    b num

User · Answer

You can get selected value also with help of click   by passing the selected value through the function    lt md-select placeholder  Select Categorie        name  Select Categorie   gt     lt md-option  ngFor  let list of categ   value   list value   click   sub cat list category id    gt         list category       lt  md-option gt   lt  md-select gt

User · Answer

Create another getter for selected item   lt form  formGroup   countryForm  gt     lt select formControlName  country  gt       lt option  ngFor  let c of countries   value   c id  gt   c name   lt  option gt     lt  select gt      lt p gt Selected Country    selectedCountry  name   lt  p gt   lt  form gt    In ts     get selectedCountry      let countryId   this countryForm controls country value    let selected   this countries find c  gt  c id    countryId     return selected

User · Answer

use this way also     lt h1 gt My Application lt  h1 gt   lt select   ngModel    selectedValue  gt        lt option  ngFor  let c of countries  value    c id    gt   c name   lt  option gt    lt  select gt

User · Answer

Just in case someone is looking to do the same using Reactive Forms    lt form  formGroup   form  gt     lt select formControlName  country  gt       lt option  ngFor  let country of countries   ngValue   country  gt   country name   lt  option gt     lt  select gt     lt p gt Selected Country    country  name   lt  p gt   lt  form gt    Check the working example here

User · Answer

It worked for me   Template HTML   I added  ngModelChange   selectChange  event   to my select    lt div gt     lt label for  myListOptions  gt My List Options lt  label gt     lt select  ngModelChange   selectChange  event     ngModel   model myListOptions id  gt       lt option  ngFor  let oneOption of listOptions   ngValue   oneOption id  gt   oneOption name   lt  option gt     lt  select gt   lt  div gt    On component ts     listOptions           id  0  name   Perfect           id  1  name   Low           id  2  name   Minor           id  3  name   High            An you need add to component ts this function     selectChange   event          In my case  event come with a id value     this model myListOptions   this listOptions  event         Note   I try with  select   oneOption id  model myListOptions id  and not work                 Another ways can be             Template HTML   I added  compareWith   compareByOptionId to my select    lt div gt     lt label for  myListOptions  gt My List Options lt  label gt     lt select   ngModel   model myListOptions  compareWith   compareByOptionId  gt       lt option  ngFor  let oneOption of listOptions   ngValue   oneOption  gt   oneOption name   lt  option gt     lt  select gt   lt  div gt    On component ts     listOptions           id  0  name   Perfect           id  1  name   Low           id  2  name   Minor           id  3  name   High            An you need add to component ts this function       Return true or false if it is the selected     compareByOptionId idFist  idSecond        return idFist  amp  amp  idSecond  amp  amp  idFist id    idSecond id

User · Answer

This code is very simple   lt select class  quot form-control quot  id  quot marasemaat quot  style  quot margin-top  10  font-size  13px  quot    ngModel    quot fullNamePresentor quot   formControl   quot stateControl quot                 change   quot onSelect  event target value  quot  gt               lt option  ngFor  quot let char of programInfo1 let i   index  quot    onclick  quot currentSlide 9 false  quot  value   char id   gt   char title    quot   quot     ---- gt    char name    quot   quot   char family    ----  gt     char time split  T   2  1   split     2    lt  option gt                lt  select gt

User · Answer

Tested on Angular 11  I need an extra object  typeSelected   Pay attention I m not using   ngValue   as other answers do   HTML  lt mat-select formControlName  quot type quot    value    quot typeSelected quot   compareWith   quot typeComparation quot  gt        lt mat-option  ngFor  quot let myType of allSurveysTypes quot   value   quot myType quot  gt              myType title         lt  mat-option gt   lt  mat-select gt   CODE    declaration typeSelected  SurveyType          assigning variable  type  of object  survey  to  typeSelected  this typeSelected   survey  type           function to compare SurveyType objects typeComparation     option  value     gt         if  option  amp  amp  value            return option id     value id

User · Answer

Also  if nothing else from given solutions doesn t work  check if you imported  FormsModule  inside of  AppModule   that was a key for me

User · Answer

lt h1 gt My Application lt  h1 gt   lt select   ngModel    selectedValue  gt     lt option  ngFor  let c of countries   ngValue   c  gt   c name   lt  option gt   lt  select gt    StackBlitz example  NOTE  you can use  ngValue   c  instead of  ngValue   c id  where c is the complete country object    value        only supports string values  ngValue        supports any type   update  If the value is an object  the preselected instance needs to be identical with one of the values   See also the recently added custom comparison https   github com angular angular issues 13268 available since 4 0 0-beta 7   lt select  compareWith   compareFn        Take care of if you want to access this within compareFn     compareFn   this  compareFn bind this       or     compareFn    a  b    gt  this  compareFn a  b     compareFn a  b          Handle compare logic  eg check if unique ids are the same     return a id     b id

User · Answer

For me its working like this  you can console event target value    lt select  change     ChangeValue  event    ngModel   opt  gt          lt option  ngFor   let opt of titleArr   value   opt  gt  lt  option gt   lt  select gt

User · Answer

lt select name  typeFather        ngModel    type typeFather  gt           lt option  ngFor  let type of types   ngValue   type  gt   type title   lt  option gt   lt  select gt    that approach always gonna work  however If you have a dynamic list  make sure you load it before the model

User · Answer

You Can Select the Id using a Function   lt option  ngFor   c of countries   change   onchange c id   gt   c name   lt  option gt

User · Answer

This could help        lt select   ngModel    selectedValue  gt             lt option  ngFor   c of countries   value   c id  gt   c name   lt  option gt       lt  select gt

[html] Binding select element to object in Angular

Examples related to html

Examples related to angular