Setting the value of a angular mat-select

Question

I cannot seem to set the selected value of a mat-select dropdown. I have a component for adding services and use the same component to display services that have already been added. I have attempted using NgModel and specifying the service.serviceId as the value but it never seems to appear in the dropdown as selected. How can I use this component to allow the user to select services and also manually set the displayed service using the data from bookingServiceTime as the preset selected value. Appreciate any help. Thanks.

     <mat-form-field>
          <mat-select placeholder="Select a service" [(ngModel)]="selectedService" required (change)="changeService($event.value)">
            <mat-optgroup *ngFor="let serviceGroup of serviceGroups" [label]="serviceGroup.serviceGroupName">
              <mat-option *ngFor="let service of serviceGroup?.services" [value]="service">
                {{service?.serviceName}}
              </mat-option>
            </mat-optgroup>
          </mat-select>
        </mat-form-field>

  ngOnInit() {
this.serviceGroupService.serviceGroups.subscribe(sg => {});

this.selectedService.serviceId = this.bookingservicetime.serviceTime.service.serviceId;
this.selectedServiceTime = this.bookingservicetime.serviceTime;
}

service.ts

export class Service extends Base {
serviceId: number;
serviceName: string;
serviceDescription: string;
serviceGroupId: number;
tax: boolean;
commission: boolean;
onlineBooking: boolean;
serviceTimes: ServiceTime[];
blockedTimeBefore?: number;
blockedTimeAfter?: number;
staff: any[]; // Need to change to StaffService.
disabled: boolean;
}

Sajeetharan Sajeetharan · Accepted Answer · 2018-06-23T16:17:55

I think you need to bind

   <mat-option *ngFor="let service of serviceGroup?.services" [value]="service.serviceName">
                {{service?.serviceName}}
   </mat-option>

Setting the value of a angular mat-select

1 Answers