Angular 2 Dropdown Options Default Value

Question

In Angular 1 I could select the default option for a drop down box using the following    lt select      data-ng-model  carSelection      data-ng-options    x make for x in cars  data-ng-selected   first  gt   lt  select gt    In Angular 2 I have     lt select class  form-control    ngModel    selectedWorkout   ngModelChange   updateWorkout  event   gt       lt option  ngFor   workout of workouts  gt   workout name   lt  option gt   lt  select gt    How could I select a default option given my option data is     name   arm     name   back     name  leg    and my value I to default on on is back

User · Answer

I faced this Issue before and I fixed it with vary simple workaround way

For your Component.html

      <select class="form-control" ngValue="op1" (change)="gotit($event.target.value)">

      <option *ngFor="let workout of workouts" value="{{workout.name}}" name="op1" >{{workout.name}}</option>

     </select>

Then in your component.ts you can detect the selected option by

gotit(name:string) {
//Use it from hare 
console.log(name);
}

User · Answer

According to https   angular io api forms SelectControlValueAccessor you just need the following   theView html     lt select  compareWith   compareFn     ngModel    selectedCountries  gt       lt option  ngFor  let country of countries   ngValue   country  gt            country name        lt  option gt   lt  select gt    theComponent ts  import   SelectControlValueAccessor   from   angular forms       compareFn c1  Country  c2  Country   boolean       return c1  amp  amp  c2   c1 id     c2 id   c1     c2

User · Answer

If you assign the default value to selectedWorkout and use  ngValue   which allows to use objects as value - otherwise only string is supported  then it should just do what you want      lt select class  form-control  name  sel         ngModel    selectedWorkout        ngModelChange   updateWorkout  event   gt     lt option  ngFor  let workout of workouts   ngValue   workout  gt        workout name      lt  option gt   lt  select gt    Ensure that the value you assign to selectedWorkout is the same instance than the one used in workouts  Another object instance even with the same properties and values won t be recognized  Only object identity is checked   update  Angular added support for compareWith  that makes it easier to set the default value when  ngValue  is used  for object values   From the docs https   angular io api forms SelectControlValueAccessor    lt select  compareWith   compareFn     ngModel    selectedCountries  gt       lt option  ngFor  let country of countries   ngValue   country  gt            country name        lt  option gt   lt  select gt        compareFn c1  Country  c2  Country   boolean       return c1  amp  amp  c2   c1 id     c2 id   c1     c2       This way a different  new  object instance can be set as default value and compareFn is used to figure out if they should be considered equal  for example if the id property is the same

User · Answer

Add on to  Matthijs  s answer  please make sure your select element has a name attribute and its name is unique in your html template  Angular 2 is using input name to update changes  Thus  if there are duplicated names or there is no name attached to input element  the binding will fail

User · Answer

works great as seen below    lt select class  form-control  id  selectTipoDocumento  formControlName  tipoDocumento   compareWith   equals             class is-valid   this docForm controls  tipoDocumento   valid  amp  amp              this docForm controls  tipoDocumento   touched     this docForm controls  tipoDocumento   dirty              class is-invalid    this docForm controls  tipoDocumento   valid  amp  amp              this docForm controls  tipoDocumento   touched     this docForm controls  tipoDocumento   dirty   gt               lt option value    gt Selecione um tipo lt  option gt               lt option  ngFor  let tipo of tiposDocumento   ngValue   tipo  gt   tipo  nome   lt  option gt             lt  select gt

User · Answer

Struggled a bit with this one  but ended up with the following solution    maybe it will help someone   HTML template    lt select  change   onValueChanged  event target   gt       lt option  ngFor  let option of uifOptions   value   option value   selected   option    uifSelected   true   false  gt   option text   lt  option gt   lt  select gt    Component   import   Component  Input  Output  EventEmitter  OnInit   from   angular core       export class UifDropdownComponent implements OnInit        Input   uifOptions   value  string  text  string          Input   uifSelectedValue  string            Output   uifSelectedValueChange EventEmitter lt string gt    new EventEmitter lt string gt         uifSelected   value  string  text  string      value       text            constructor            onValueChanged target  HTMLSelectElement  void           this uifSelectedValue   target value          this uifSelectedValueChange emit this uifSelectedValue              ngOnInit             this uifSelected   this uifOptions filter o   gt  o value             this uifSelectedValue  0

User · Answer

Step  1 Create Properties declare class   export class Task       title  string      priority  Array lt any gt       comment  string       constructor             this title                    this priority                 this comment                        Stem  2 Your Component Class   import   Task   from    task    export class TaskComponent implements OnInit     priorityList  Array lt any gt            value  0  label               value  1  label               value  2  label                value  3  label                 value  4  label                  value  5  label                   taskModel  Task             new Task       constructor private taskService  TaskService        ngOnInit         this taskModel priority        3      index number            Step  3 View File  html    lt select class  form-control  name  priority    ngModel    taskModel priority   required gt       lt option  ngFor  let list of priorityList   value   list value  gt          list label        lt  option gt   lt  select gt       Output

User · Answer

In my case  here this selectedtestSubmitResultView is set with default value based on conditions and an variable testSubmitResultView must be one and same as testSubmitResultView  This indeed worked for me  lt select class  quot form-control quot  name  quot testSubmitResultView quot     ngModel    quot selectedtestSubmitResultView quot   ngModelChange   quot updatetestSubmitResultView  event  quot  gt       lt option  ngFor  quot let testSubmitResultView of testSubmitResultViewArry quot   ngValue   quot testSubmitResultView quot   gt            testSubmitResultView testSubmitResultViewName        lt  option gt   lt  select gt   For More Information  testSubmitResultViewArry  Array lt any gt        selectedtestSubmitResultView  string       getTestSubmitResultViewList         try           this examService getTestSubmitResultViewDetails   subscribe response   gt                if  response    null  amp  amp  response     undefined  amp  amp  response length  gt  0                    response forEach x   gt                        if  x isDeleted     false                            this testSubmitResultViewArry push x                                             if  x isDefault     true                            this selectedtestSubmitResultView   x                                                                           catch  ex            console log  Method  getTestSubmitResultViewList    ex message

User · Answer

Add this Code at o position of the select list    lt option  ngValue   undefined  selected gt Select lt  option gt

User · Answer

Use index to show the first value as default   lt option  ngFor  let workout of workouts   i   index   selected   i    0  gt   workout name   lt  option gt

User · Answer

just set the value of the model to the default you want like this   selectedWorkout    back    I created a fork of  Douglas  plnkr here to demonstrate the various ways to get the desired behavior in angular2

User · Answer

You Can approach this way    lt option  ngFor  let workout of workouts   value   workout name  gt   workout name   lt  option gt    or this way      lt option  ngFor  let workout of workouts   attr value   workout name   attr selected   workout name     leg    true   null  gt   workout name   lt  option gt    or you can set default value this way    lt option  value   null  gt Please Select lt  option gt   lt option  ngFor  let workout of workouts   value   workout name  gt   workout name   lt  option gt    or   lt option  value   0  gt Please Select lt  option gt   lt option  ngFor  let workout of workouts   value   workout name  gt   workout name   lt  option gt

User · Answer

You can do as above    lt select class  form-control             ngModel    selectedWorkout            ngModelChange   updateWorkout  event   gt       lt option  ngFor   workout of workouts                      let itemIndex   index               attr selected   itemIndex    0  gt        workout name        lt  option gt   lt  select gt    In above code as you can see  selected attribute of the repeating option is set on checking index of the repeating loop of list   attr  lt  html attribute name    is used for setting html attribute in angular2   Another approach will be setting model value in typescript file as    this selectedWorkout   this workouts length  gt  0                          this workouts 0  name                           No data found     arm

User · Answer

Add binding property selected  but make sure to make it null  for other fields e g    lt option  ngFor   workout of workouts   selected   workout name    back    true  null  gt   workout name   lt  option gt    Now it will work

User · Answer

Add a binding to the selected property  like this    lt option  ngFor   workout of workouts        selected   workout name     back   gt   workout name   lt  option gt

User · Answer

Fully fleshing out other posts  here is what works in Angular2 quickstart    To set the DOM default  along with  ngFor  use a conditional statement in the  lt option gt  s selected attribute   To set the Control s default  use its constructor argument  Otherwise before an onchange when the user re-selects an option  which sets the control s value with the selected option s value attribute  the control value will be null   script   import  ControlGroup Control  from   angular common       export class MyComponent    myForm  ControlGroup    myArray  Array lt Object gt     obj1 obj2 obj3     myDefault  Object   myArray 1     or obj2    ngOnInit      override     this myForm   new ControlGroup   myDropdown   new Control this myDefault           myOnSubmit        console log this myForm value myDropdown     returns the control s value          markup    lt form  ngFormModel   myForm   ngSubmit   myOnSubmit    gt     lt select ngControl  myDropdown  gt       lt option  ngFor  let eachObj of myArray  selected  eachObj     myDefault                value    eachObj    gt   eachObj myText   lt  option gt     lt  select gt     lt br gt     lt button type  submit  gt Save lt  button gt   lt  form gt

User · Answer

lt select class  form-control  name  someting   ngModel   selectedWorkout   ngModelChange   updateWorkout  event   gt       lt option value    workout name     ngFor   workout of workouts  gt   workout name   lt  option gt   lt  select gt    If you are using form there should be name field inside select tag   All you need to do is just add value to the option tag   selectedWorkout value should be  back    and its done

User · Answer

If you don t want the 2-way binding via   ngModel    do this    lt select  change   selectedAccountName    event target value  gt     lt option  ngFor  let acct of accountsList   ngValue   acct  gt    acct name    lt  option gt   lt  select gt    Just tested on my project on Angular 4 and it works  The accountsList is an array of Account objects in which name is a property of Account   Interesting observation   ngValue   acct  exerts the same result as  ngValue   acct name   Don t know how Angular 4 accomplish it

User · Answer

You can Use that  ngModel  instead of   ngModel  and it is Ok   lt select class  form-control     ngModel   selectedWorkout     ngModelChange   updateWorkout  event   gt      lt option  ngFor   workout of workouts  gt   workout name   lt  option gt   lt  select gt

User · Answer

For me  I define some properties   disabledFirstOption   true   get isIEOrEdge    boolean       return  msie s trident   edge   i test window navigator userAgent      Then in the constructor and ngOnInit  constructor         this disabledFirstOption   false     ngOnInit         setTimeout      gt            this disabledFirstOption   true              And in the template I add this as the first option inside the select element   lt option  ngIf  isIEOrEdge   value   undefined   disabled   disabledFirstOption  selected gt  lt  option gt    If you allow to select the first option you can just remove the usage of the property disabledFirstOption

User · Answer

You just need to put the ngModel and the value you want selected    lt select id  typeUser  ngModel  Advanced  name  typeUser  gt     lt option gt Basic lt  option gt     lt option gt Advanced lt  option gt     lt option gt Pro lt  option gt   lt  select gt

User · Answer

I faced the same problem while using angular 11  But finally found a solution     lt option disabled selected value  quot undefined quot  gt Select an Option lt  option gt    complete example with ngFor   lt select name  quot types quot  id  quot types quot    ngModel    quot model type quot   type  quot ngModel quot  gt     lt option class  quot  quot  disabled selected value  quot undefined quot  gt Select an Option lt  option gt     lt option  ngFor  quot let item of course types  let x   index quot   ngValue   quot type id quot  gt         item name     lt  option gt   lt  select gt

[html] Angular 2 Dropdown Options Default Value

Examples related to html

Examples related to angular