Angular Material: mat-select not selecting default

by

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.

<mat-select [(value)]="selected2">

should be 

<mat-select [(ngModel)]="selected2">

Complete code:

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

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.

<mat-form-field>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</mat-form-field>

More Related Contents:

  1. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  2. How to change angular material datepicker format
  3. Dynamically add event listener
  4. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  5. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  6. Use component from another module
  7. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  8. Angular and Typescript: Can’t find names – Error: cannot find name
  9. Angular 2 Scroll to top on Route Change
  10. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  11. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  12. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  13. Angular 2 Form “Cannot find control with path”
  14. vs
  15. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  16. Angular 2 Basic Authentication not working
  17. How to smooth scroll to page anchor in angular 4 without plugins properly?
  18. Angular 2 + Ionic 2: Detect if an object was modified
  19. Http.get() working but not working in build(Release/Debug) in Ionic 4
  20. Property ‘json’ does not exist on type ‘Object’
  21. inject() must be called from an injection context
  22. How to use variable to define templateUrl in Angular2
  23. Behaviour subject initial value null?
  24. How to Using a FormArray in a FormGroup
  25. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  26. How to validate white spaces/empty spaces? [Angular 2]
  27. Angular 4 Material table highlight a row
  28. Call a function every 10 seconds Angular2
  29. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  30. Angular Material2 theming – how to set app background?

Leave a Comment