Angular Material mat-select not selecting default

Question

I have a mat-select where the options are all objects defined in an array   I am trying to set the value to default to one of the options  however it is being left selected when the page renders   My typescript file contains     public options2           id   1   name    a          id   2   name    b         public selected2   this options2 1  id    My HTML file contains      lt div gt       lt mat-select           value    selected2  gt         lt mat-option            ngFor  let option of options2            value     option id     gt             option name           lt  mat-option gt       lt  mat-select gt     lt  div gt    I have tried setting selected2 and the value in mat-option to both the object and it s id  and have tried using both   value   and   ngModel   in the mat-select  but none are working   I am using material version 2 0 0-beta 10

User · Answer

As already mentioned in Angular 6 using ngModel in reactive forms is deprecated (and removed in Angular 7), so I modified the template and the component as following.

The template:

<mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let v of values" [value]="v">{{v.label}}</mat-option>
    </mat-select>
</mat-form-field>

The main parts of the component (onChanges and other details are omitted):

interface SelectItem {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input
    selected: SelectItem[] = [];

    @Input()
    values: SelectItem[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(v1: SelectItem, v2: SelectItem): boolean {
        return compareFn(v1, v2);
    }
}

function compareFn(v1: SelectItem, v2: SelectItem): boolean {
    return v1 && v2 ? v1.value === v2.value : v1 === v2;
}

Note this.filter.setValue(this.selected) in ngOnInit above.

It seems to work in Angular 6.

User · Answer

A very simple way to achieve this is using a formControl with a default value  inside a FormGroup  optional  for example  This is an example using an unit selector to an area input   ts  H AREA UNIT   1  M AREA UNIT   2   exampleForm  FormGroup   this exampleForm   this formBuilder group     areaUnit   this H AREA UNIT         html   lt form  formGroup   exampleForm  gt    lt mat-form-field gt      lt mat-label gt Unit lt  mat-label gt      lt mat-select formControlName  areaUnit  gt        lt mat-option  value   H AREA UNIT  gt h lt  mat-option gt        lt mat-option  value   M AREA UNIT  gt m lt  mat-option gt      lt  mat-select gt    lt  mat-form-field gt   lt  form gt

User · Answer

I did this    lt div gt       lt mat-select   ngModel    selected  gt           lt mat-option  ngFor  let option of options                value   option id     selected id   selected   option  gt                 option name             lt  mat-option gt       lt  mat-select gt   lt  div gt    Normally you can do  value   option   unless you get your options from some database   I think either the delay of getting the data causes it not to work  or the objects gotten are different in some way even though they are the same   Weirdly enough it s most likely the later one  as I also tried  value   option     selected   selected   option  and it didn t work

User · Answer

I m using Angular 5 and reactive forms with mat-select and couldn t get either of the above solutions to display the initial value    I had to add  compareWith  to deal with the different types being used within the mat-select component  Internally  it appears mat-select uses an array to hold the selected value  This is likely to allow the same code to work with multiple selections if that mode is turned on   Angular Select Control Doc  Here s my solution   Form Builder to initialize the form control   this formGroup   this fb group       country  new FormControl   this myRecord country id                    Then implement the compareWith function on your component   compareIds id1  any  id2  any   boolean       const a1   determineId id1       const a2   determineId id2       return a1     a2      Next create and export the determineId function  I had to create a standalone function so mat-select could use it     export function determineId id  any   string       if  id constructor name      array   amp  amp  id length  gt  0           return      id 0             return      id      Finally add the compareWith attribute to your mat-select    lt mat-form-field hintLabel  select one  gt   lt mat-select placeholder  Country  formControlName  country        compareWith   compareIds  gt        lt mat-option gt None lt  mat-option gt       lt mat-option  ngFor  let country of countries   value   country id  gt                             country name         lt  mat-option gt   lt  mat-select gt   lt  mat-form-field gt

User · Answer

Binding or setting of default value works only if the value attribute on MatSelect is comparable to value attribute binded to MatOption  If you bind caption of your item to value attribute of mat-option element you must set the default element on mat-select to caption of your item too  If you bind Id of your item to mat-option  you must bind id to mat-select too  not a whole item  caption or any other  only the same field   But you need to do it with binding

User · Answer

I did it just like in these examples  Tried to set the value of the mat-select to the value of one of the mat-options  But failed    My mistake was to do   value    someNumberVariable  to a numeric type variable while the ones in mat-options were strings  Even if they looked the same in the template it would not select that option    Once I parsed the someNumberVariable to a string everything was totally fine    So it seems you need to have the mat-select and the mat-option values not only be the same number  if you are presenting numbers  but also let them be of type string

User · Answer

The solution for me was    lt mat-form-field gt     lt mat-select  monedaSelect  formControlName  monedaDebito   attr disabled   isLoading   placeholder   monedaLabel   async   gt     lt mat-option  ngFor  let moneda of monedasList   value   moneda id  gt   moneda detalle   lt  mat-option gt   lt  mat-select gt      TS    ViewChild  monedaSelect   public monedaSelect  MatSelect  this genericService getOpciones   subscribe res   gt       this monedasList   res    this monedaSelect  onChange res 0  id           Using object   id  number  detalle  string

User · Answer

Try this   this selectedObjectList     id 1    id 2    id 3   this allObjectList     id 1    id 2    id 3    id 4    id 5   let newList   this allObjectList filter e   gt  this selectedObjectList find a   gt  e id    a id   this selectedObjectList   newList

User · Answer

Use a binding for the value in your template   value     option id       should be    value   option id    And in your selected value use ngModel instead of value    lt mat-select   value    selected2  gt    should be    lt mat-select   ngModel    selected2  gt    Complete code    lt div gt     lt mat-select   ngModel    selected2  gt       lt mat-option  ngFor  let option of options2   value   option id  gt    option name    lt  mat-option gt     lt  mat-select gt   lt  div gt      On a side note as of version 2 0 0-beta 12 the material select now accepts a mat-form-field element as the parent element so it is consistent with the other material input controls  Replace the div element with mat-form-field element after you upgrade    lt mat-form-field gt     lt mat-select   ngModel    selected2  gt       lt mat-option  ngFor  let option of options2   value   option id  gt    option name    lt  mat-option gt     lt  mat-select gt   lt  mat-form-field gt

User · Answer

My solution is little tricky and simpler     lt div gt       lt mat-select          placeholder   selected2  gt         lt mat-option            ngFor  let option of options2            value     option id     gt             option name           lt  mat-option gt       lt  mat-select gt     lt  div gt    I just made use of the placeholder  The default color of material placeholder is light gray  To make it look like the option is selected  I just manipulated the CSS as follows     ng-deep  mat-select-placeholder       color  black

User · Answer

x000D   x000D  public options2     x000D      id   1   name    a    x000D      id   2   name    b   x000D    x000D    x000D  YourFormGroup   FormGroup   x000D  mode   create     update     create   x000D   x000D  constructor  Inject MAT DIALOG DATA  private defaults  defautValuesCpnt  x000D        private fb  FormBuilder  x000D        private cd  ChangeDetectorRef    x000D    x000D     x000D  ngOnInit     x000D   x000D    if  this defaults    x000D      this mode    update   x000D      else   x000D      this defaults      as Cpnt  x000D      x000D   x000D    this YourFormGroup patchValue   x000D          x000D      fCtrlName  this options2 find x   gt  x name     this defaults name  id  x000D           x000D        x000D   x000D    this YourFormGroup   this fb group   x000D      fCtrlName      Validators required  x000D        x000D   x000D    x000D     lt div gt  x000D       lt mat-select formControlName  fCtrlName  gt   lt mat-option x000D             ngFor  let option of options2  x000D            value     option id     gt  x000D             option name    x000D         lt  mat-option gt  x000D       lt  mat-select gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

Use compareWith  A function to compare the option values with the selected values  see here  https   material angular io components select api MatSelect  For an object of the following structure   listOfObjs      name   john   id   1      name   jimmy   id   2          Define markup like this     lt mat-form-field gt     lt mat-select      compareWith   compareObjects        ngModel    obj  gt          lt mat-option   ngFor  let obj of listOfObjs   value   obj  gt               obj name            lt  mat-option gt       lt  mat-select gt   lt  mat-form-field gt    And define comparison function like this    compareObjects o1  any  o2  any   boolean     return o1 name     o2 name  amp  amp  o1 id     o2 id

User · Answer

You should be binding it as  value  in the mat-option as below    lt mat-select placeholder  Panel color    value    selected2  gt     lt mat-option  ngFor  let option of options2   value   option id  gt         option name       lt  mat-option gt   lt  mat-select gt    LIVE DEMO

User · Answer

You can simply implement your own compare function   compareWith   compareItems   See as well the docu  So the complete code would look like      lt div gt       lt mat-select           value    selected2   compareWith   compareItems  gt         lt mat-option            ngFor  let option of options2            value     option id     gt             option name           lt  mat-option gt       lt  mat-select gt     lt  div gt    and in the Typescript file     compareItems i1  i2        return i1  amp  amp  i2  amp  amp  i1 id   i2 id

User · Answer

I followed the above very carefully and still couldn t get the initial value selected   The reason was that although my bound value was defined as a string in typescript  my backend API was returning a number    Javascript loose typing simply changed the type at runtime  without error   which prevented selection the of the initial value   Component  myBoundValue  string    Template   lt mat-select   ngModel    myBoundValue  gt    Solution was to update the API to return a string value

User · Answer

TS      optionsFG  FormGroup     this optionsFG   this fb group          optionValue   null  Validators required             this optionsFG get  optionValue   setValue option 0      option is the arrayName   HTML      lt div class  text-right   formGroup   optionsFG  gt        lt mat-form-field gt            lt mat-select placeholder  Category  formControlName  optionValue  gt              lt mat-option  ngFor  let option of options let i  index   value   option  gt                option Value              lt  mat-option gt           lt  mat-select gt         lt  mat-form-field gt     lt  div gt

User · Answer

A comparison between a number and a string use to be false  so  cast you selected value to a string within ngOnInit and it will work   I had same issue  I filled the mat-select with an enum  using   Object keys MyAwesomeEnum  filter k   gt   isNaN Number k       and I had the enum value I wanted to select     I spent few hours struggling my mind trying to identify why it wasn t working  And I did it just after rendering all the variables being used in the mat-select  the keys collection and the selected    if you have   0   1   2   and you want to select 1  which is a number  1   1  is false and because of that nothing is selected   so  the solution is to cast you selected value to a string within ngOnInit and it will work

[angular] Angular Material: mat-select not selecting default

Examples related to angular

Examples related to typescript

Examples related to angular-material2