Select default option value from typescript angular 6

Question

I have a select html like this    lt select ng-model  nrSelect  class  form-control  gt                                                                       lt option value  47  gt 47 lt  option gt       lt option value  46  gt 46 lt  option gt       lt option value  45  gt 45 lt  option gt   lt  select gt    How can I select the default value from typescript for example 47

User · Accepted Answer

You can do this    lt select  class  form-control            change   ChangingValue  event    value   46  gt     lt option value  47  gt 47 lt  option gt     lt option value  46  gt 46 lt  option gt     lt option value  45  gt 45 lt  option gt   lt  select gt      Note  You can set the value of select only from options tag  In the above example  you cannot set the value of select to anything other than 45  46  47    Here  you can ply with this

User · Answer

First or all you are using ng-model which is considered to be an angularjs syntax  Use   ngModel   instead with the default value  App component html   lt select   ngModel    nrSelect  class  form-control  gt       lt option value  47  gt 47 lt  option gt       lt option value  46  gt 46 lt  option gt       lt option value  45  gt 45 lt  option gt   lt  select gt    App component ts  import   Component   from   angular core     Component        selector   my-app        templateUrl     app component html        styleUrls       app component css          export class AppComponent        nrSelect string    47

User · Answer

I think the best way to do it to bind it with ngModel     lt select name  num    ngModel    number  gt                   lt option  ngFor  let n of numbers   value   n  gt   n   lt  option gt                 lt  select gt    and in ts file add   number 47  numbers  45 46 47

User · Answer

I had similar issues with Angular6   After going through many posts  I had to import FormsModule as below in app module ts    import  FormsModule  from   angular forms     Then my ngModel tag worked   Please try this     lt select   ngModel    nrSelect  class  form-control  gt                                                                                                   lt option  ngValue   47  gt 47 lt  option gt                                       lt option  ngValue   46  gt 46 lt  option gt                                       lt option  ngValue   45  gt 45 lt  option gt   lt  select gt

User · Answer

app component html    lt select   ngModel    nrSelect  class  form-control  gt     lt option value  47  gt 47 lt  option gt     lt option value  46  gt 46 lt  option gt     lt option value  45  gt 45 lt  option gt   lt  select gt       app component ts   import   Component   from   angular core     Component     selector   my-app     templateUrl     app component html     styleUrls       app component css       export class AppComponent      nrSelect   47

User · Answer

HTML  lt select class  form-control  gt       lt option  ngFor  quot let option of options quot       selected   quot option     nrSelect quot       value   quot option quot  gt             option         lt  option gt   lt  select gt   Typescript nrSelect   47  options    41  42  47  48

User · Answer

In addition to what mentioned before  you can use  attr selected  directive to select a specific option  as follows   lt select gt       lt option  ngFor  quot let program of programs quot   attr selected   quot  member programID    program id  quot  gt             program name         lt  option gt   lt  select gt

User · Answer

In case you use Angular s FormBuilder this is the way to go  at least for Angular 9    HTML view  yourelement component html  Use  formGroup  to reference form variable  and use formControlName to reference form s inner variable  both defined in TypeScrit file   Preferably  use  value  to reference some type of option ID    lt form  formGroup     uploadForm   ngSubmit   onSubmit    gt          html     lt select class  form-control  formControlName  form variable  required gt          lt option  ngFor  let elem of list   value   elem id  gt   elem nanme   lt  option gt      lt  select gt            lt  form gt    Logic file  yourelement component ts  In the initialization of FormBuilderobject  in ngOnInit   function  set the default value you desire to be as default selected            Remember to add imports of  FormsModule  and  ReactiveFormsModule  to app module ts import   FormBuilder  FormGroup   from   angular forms          export class YourElementComponent implements OnInit         lt form gt  variable   uploadForm  FormGroup     constructor  private formBuilder  FormBuilder        ngOnInit          this uploadForm   this formBuilder group                             form variable    0        lt --- Here is the  value  ID of default selected

User · Answer

i manage this by doing like this      lt select class  form-control             ngModel    currentUserID          formControlName  users  gt           lt option value  -1  gt    select a user    translate   lt  option gt               lt option               ngFor  let user of users              value    user id    gt                user firstname       lt  option gt   lt  select gt

User · Answer

In my case I m using the same markup for editing an existing entity  or creating a brand new one  so far anyway    I want to display a default-value that is  selected  in the select-elements when in creationMode  while displaying the values form the backend in editMode   My solution is    lt select   ngModel    entity property  id  property  name  property  required gt     lt option disabled hidden value  undefined  gt Enter prop lt  option gt     lt option  ngFor  let prop of sortedProps  value    prop value    gt   prop displayName   lt  option gt   lt  select gt    for the regular available options I m using a sortedProps Array to provide option choices  But that s not the important part here   What did the trick for me is setting value  undefined  to let the angular-model-binding     select this option automatically when in creationMode  Not sure if its a hack  but does exactly what i want  No addtionally typeScript necessary   Additionally  sepcifing hidden makes sure the option in my case is not selectable  while required makes sure the form is invalid unless something gets selected there

User · Answer

Correct Way would be      lt select id  select-type-basic    ngModel    status  gt       lt option  ngFor  let status item of status values  gt        status item        lt  option gt   lt  select gt    Value Should be avoided inside option if the value is to be dynamic since that will set the default value of the  Select field   Default Selection should be binded with   ngModel   and Options should be declared likewise   status   any    47   status values  any     45    46    47

User · Answer

lt select class  quot form-control quot   value   quot defaultSelectedCurrency quot  formControlName  quot currency quot  gt   lt option  ngFor  quot let item of currency quot   value   quot item value quot   selected   quot item isSelected quot  gt   item key   lt  option gt   lt  select gt   currency           key   USD   value   USD   isSelected  true          key   AUD   value   AUD   isSelected  false          defaultSelectedCurrency  string    ngOnInit         this defaultSelectedCurrency   this currency 0  value

User · Answer

You may use bellow like in angular 9   lt select   ngModel    quot itemId quot   formControlName  quot itemId quot  class  quot form-control quot   gt             lt option  ngValue   quot  quot  disabled gt Choose Gender lt  option gt                          lt option  ngFor  quot let item of items quot    ngValue   quot item  id quot   selected   quot item  id    this id quot    gt                 item name              lt  option gt      lt  select gt

User · Answer

For reactive form  I managed to make it work by using the following example  47 can be replaced with other value or variable      lt div  formGroup   form  gt     lt select formControlName  fieldName  gt       lt option          ngFor  let option of options  index as i           selected   option     47       gt             option         lt  option gt     lt  select gt   lt  div gt

[angular] Select default option value from typescript angular 6

Examples related to angular

Examples related to typescript

[angular] Select default option value from typescript angular 6

Examples related to angular

Examples related to typescript

Examples related to dropdown