Set initially selected item in Select list in Angular2

Question

I ve managed to get a Select list to bind with my model for the purpose of saving  but I cannot work out how to make Angular2 automatically select the correct option on the Select list if I m providing editing functionality  In other words  if I m editing a pre-existing object via a form  I need the Select list to reflect the initial state of the object  e g  option 5 in the select list   rather than it just defaulting to the first item    lt select  ngModel   originalObject  gt       lt option  ngFor  let object of objects   ngValue   object  gt   object name   lt  option gt   lt  select gt    How I imagine it should work  but doesn t    lt select  ngModel   originalObject  gt       lt option  ngFor  let object of objects   ngValue   object   selected   object     originalObject  gt   object name   lt  option gt   lt  select gt    So essentially I m trying to make use of the  selected  property on option  but for whatever reason it doesn t do anything  The  selectedObject  in this case would be an object in the component that it can read

User · Answer

Update to angular 4 X X  there is a new way to mark an option selected    lt select  compareWith   byId    ngModel    selectedItem  gt     lt option  ngFor  let item of items   ngValue   item  gt   item name      lt  option gt   lt  select gt   byId item1  ItemModel  item2  ItemModel      return item1 id     item2 id      Some tutorial here

User · Answer

If you use   lt select  ngModel   object  gt       lt option  ngFor  let object of objects   ngValue   object  gt   object name   lt  option gt   lt  select gt    You need to set the property object in you components class to the item from objects that you want to have pre-selected   class MyComponent     object    objects     name   a     name   b     name   c       constructor         this object   this objects 1

User · Answer

You can achieve the same using   lt select  ngModel   object  gt     lt option  ngFor  let object of objects let i  index    value   object value  selected  i  0  gt   object name   lt  option gt   lt  select gt

User · Answer

I hope it will help someone      works on Angular 6   I had to add lots of select options dynamically and following worked for me    lt div  ngFor  let option of model q options  let ind index   gt            lt select              ngModel    model q options ind  type              ngModelOptions    standalone  true            gt              lt option               ngFor  let object of objects                ngValue   object type                selected   object type     model q options ind  type             gt   object name              lt  option gt           lt  select gt             lt div  ngSwitch   model q options ind  type  gt              here  lt div  ngSwitchCase   text  or  imagelocal  or etc   gt  is used to add specific input forms            lt  div gt   lt  div gt    and in   ts     initial state of the model    q options in html   NewOption and its second argument is option type model   new NewQuestion 1  null  2           new NewOption 0   text       1        new NewOption 1   imagelocal       1            dropdown options objects          type   text   name   text         type   imagelocal   name   image - local file         type   imageurl   name   image URL        and etc        When user adds one more  input option   pls do not confuse  input option  with select options - select options are static here  specific select option  selected by the user earlier  is preserved on each all dynamically added  input option s select options

User · Answer

The easiest way to solve this problem in Angular is to do    In Template    lt select  ngModel   selectedObjectIndex  gt     lt option  value   i   ngFor  let object of objects  let i   index   gt   object name   lt  option gt   lt  select gt    In your class   this selectedObjectIndex   1 0 your number wich item should be selected

User · Answer

Okay  so I figured out what the problem was  and the approach I believe works best  In my case  because the two objects weren t identical from a Javascript perspective  as in  they may have shared the same values  but they were different actual objects  e g  originalObject was instantiated entirely separately from objects which was essentially an array of reference data  to populate the dropdown    I found that the approach that worked best for me was to compare a unique property of the objects  rather than directly compare the two entire objects  This comparison is done in the bound property selected    lt select  ngModel   originalObject  gt       lt option  ngFor  let object of objects   ngValue   object   selected   object uniqueId     originalObject uniqueId  gt   object name   lt  option gt   lt  select gt

[angular] Set initially selected item in Select list in Angular2

Examples related to angular