Set default value for mat-select

Question

I have a mat-select. when I first show the form I want it to select the first item in the select after the data is loaded. How can I do this?

  <mat-select 
          placeholder="period"
          (selectionChange)="selectperiod($event)"
          (ngModel)="(periodoptions)"
        >
          <mat-option
            *ngFor="let p of periodoptions | async"
            [value]="p.periodid"
          >
            {{ p.periodstart }}
          </mat-option>
        </mat-select>

using this to call function to pull rest data

 of(this.getperiods()).subscribe(pp => {
      this.periodoptions = pp;

I think you should look at this answer. https://stackoverflow.com/questions/50650790/set-default-option-in-mat-select — lastSheep, Jul 02 '20 at 00:56

Sebastián Puchet · Accepted Answer · 2020-07-02T02:32:47.850

0

If you want to use ngModel, just replace (ngModel) by [(ngModel)]. You can also replace the ngModel by [(value)] to avoid using the ngModel module.

Also, assign periodoptions to the ngModel is wrong if you want to select the first item of the array, since each mat-option value is p.periodid. You will have to use periodoptions[0].periodid instead

edited Jul 02 '20 at 02:32

answered Jul 02 '20 at 01:03

Sebastián Puchet

398
1
10

score -1 · Answer 2 · answered Jul 02 '20 at 01:47

Maybe this can help you:

<mat-select placeholder="period" (selectionChange)="selectperiod($event)" [(ngModel)]="periodoptions">
    <mat-option>Default Option</mat-option>
    <mat-option *ngFor="let p of periodoptions | async" [value]="p.periodid">
        {{ p.periodstart }}
    </mat-option>
</mat-select>

Set default value for mat-select

2 Answers2