Home > Mobile >  Mat-select not populating with value
Mat-select not populating with value

Time:02-20

I am trying to populate my mat-select dropdown with data but am not seeing anything and don't see any console errors too.

Here is a stackblitz example I made to replicate: https://stackblitz.com/edit/angular-9-material-starter-f1drwx?file=src/app/app.component.html

This is my code

this.selected = [
    "EUR",
    1
]


<mat-form-field appearance="fill">
  <mat-select (selectionChange)="onInputSelectChange($event)" [(ngModel)]="selected" disabled> 
    <mat-option [value]="selected[1]">{{selected[0]}}</mat-option>
  </mat-select>
</mat-form-field>

I want to set the value and name in the disabled mat-select field. Any idea why it doesn't populate?

CodePudding user response:

Your [(ngModel)]="selected" is an array while your mat-option value is a string. Either change your ngModel to

[(ngModel)]="selected[1]"

Or change value to whole array

<mat-option [value]="selected">{{selected[0]}}</mat-option>
  • Related