Set default option in mat-select

Question

I have a simple select option form field in my Angular material project   component html     lt mat-form-field gt       lt mat-select   value    modeSelect  placeholder  Mode  gt         lt mat-option value  domain  gt Domain lt  mat-option gt         lt mat-option value  exact  gt Exact lt  mat-option gt       lt  mat-select gt     lt  mat-form-field gt    Where   value    modeSelect  is binded to the modeSelect property in the component ts file  I want to make it so the  lt mat-option value  domain  gt Domain lt  mat-option gt  is selected by default on page load   ng-selected did not work for me

User · Answer

Normally you are going to do this in your template with FormGroup  Reactive Forms  etc         this myForm   this fb group         title       Validators required         description       Validators required         isPublished    false  Validators required

User · Answer

This issue vexed me for some time  I was using reactive forms and I fixed it using this method  PS  Using Angular 9 and Material 9   In the  ngOnInit  lifecycle hook  1  Get the object you want to set as the default from your array or object literal  const countryDefault   this countries find c   gt  c number      826      Here I am grabbing the United Kingdom object from my countries array   2  Then set the formsbuilder object  the mat-select  with the default value   this addressForm get  country   setValue countryDefault name     3  Lastly   set the bound value property  In my case I want the name value    lt mat-select formControlName  country  gt      lt mat-option  ngFor  let country of countries   value   country name   gt              country name       lt  mat-option gt   lt  mat-select gt    Works like a charm  I hope it helps

User · Answer

It took me several hours to figure out this until the similarity of the datatypes between the array and that of the default value worked for me

User · Answer

I would like to add to Narm s answer here and have added the same as a comment under her answer   Basically the datatype of the value assigned to   value   should match the datatype of the  value  attribute used for the mat-options  Especially if some one populates the options using an  ngFor as below   lt mat-form-field fxHide gt-sm  true  gt           lt mat-select   value    heroes 0  id  gt             lt mat-option  ngFor  let hero of heroes   value   hero id  gt    hero name    lt  mat-option gt           lt  mat-select gt   lt  mat-form-field gt    Notice that  if you change the   value    heroes 0  id  to   value    heroes 0  name  it won t work as the data types don t match   These are my findings  please feel free to correct me if needed

User · Answer

Try this   lt mat-form-field gt       lt mat-select   ngModel    modeselect   placeholder   modeselect  gt           lt mat-option value  domain  gt Domain lt  mat-option gt           lt mat-option value  exact  gt Exact lt  mat-option gt       lt  mat-select gt   lt  mat-form-field gt    Component   export class SelectValueBindingExample       public modeselect    Domain       Live demo  Also  don t forget to import FormsModule in your app module

User · Answer

Using Form Model  Reactive Forms   --- Html code--  lt form  formGroup   patientCategory  gt   lt mat-form-field class  full-width  gt       lt mat-select placeholder  Category  formControlName  patientCategory  gt           lt mat-option gt -- lt  mat-option gt           lt mat-option  ngFor  let category of patientCategories   value   category  gt                category name             lt  mat-option gt       lt  mat-select gt   lt  mat-form-field gt    ----ts code ---  ngOnInit              this patientCategory   this fb group               patientCategory   null  Validators required                     const toSelect    Your Default Value         this patientCategory get  patientCategory   setValue toSelect           With out form Model  --- html code --  lt mat-form-field gt     lt mat-label gt Select an option lt  mat-label gt     lt mat-select   value    selected  gt       lt mat-option gt None lt  mat-option gt       lt mat-option value  option1  gt Option 1 lt  mat-option gt       lt mat-option value  option2  gt Option 2 lt  mat-option gt       lt mat-option value  option3  gt Option 3 lt  mat-option gt     lt  mat-select gt   lt  mat-form-field gt    ---- ts code -- selected    option1   Here take care about type of the value assigning

User · Answer

Working StackBlitz  No need to use ngModel or Forms  In your html      lt mat-form-field gt     lt mat-select   value    selected  placeholder  Mode  gt       lt mat-option value  domain  gt Domain lt  mat-option gt       lt mat-option value  exact  gt Exact lt  mat-option gt     lt  mat-select gt   lt  mat-form-field gt    and in your component just set your public property selected to the default   selected    domain

User · Answer

On your typescript file  just assign this domain on modeSelect on Your ngOnInit   method like below      ngOnInit             this modeSelect    domain             And on your html  use your select list    lt mat-form-field gt           lt mat-select    value    modeSelect  placeholder  Mode  gt             lt mat-option value  domain  gt Domain lt  mat-option gt             lt mat-option value  exact  gt Exact lt  mat-option gt           lt  mat-select gt         lt  mat-form-field gt

User · Answer

HTML   lt mat-form-field gt   lt mat-select   ngModel    modeSelect  placeholder  Mode  gt     lt mat-option  ngFor  let obj of Array    value   obj value  gt   obj value   lt  mat-option gt   lt  mat-select gt      Now set your default value to      modeSelect     where you are getting the values in Array variable

User · Answer

I was able to set the default value or whatever value using the following   Template             lt mat-form-field gt                 lt mat-label gt Holiday Destination lt  mat-label gt                 lt mat-select   ngModel    selectedCity  formControlName  cityHoliday  gt                   lt mat-option  value   nyc  gt New York lt  mat-option gt                   lt mat-option  value   london  gt London lt  mat-option gt                   lt mat-option  value   india  gt Delhi lt  mat-option gt                   lt mat-option  value   Oslo  gt Oslo lt  mat-option gt                 lt  mat-select gt             lt  mat-form-field gt   Component   export class WhateverComponent implements OnInit   selectedCity  string          ngOnInit         this selectedCity    london

User · Answer

Read this if you are populating your mat-select asyncronously via an http request  If you are using a service to make an api call to return the mat-select options values  you must set the  selected value  on your form control as part of the  complete  section of your service api call subscribe    For example    this customerService getCustomers   subscribe    customers   gt  this customers   customers     error   gt  this errorMessage   error as any         gt  this customerSelectControl setValue this mySelectedValue

User · Answer

Try this    lt mat-select   ngModel    defaultValue  gt  export class AppComponent     defaultValue    domain

[angular] Set default option in mat-select

Examples related to angular

Examples related to angular-material