title: Setting the value of a angular mat-select
body: <p>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 <code>bookingServiceTime</code> as the preset selected value.  Appreciate any help. Thanks.</p>
  
  <pre><code>     &lt;mat-form-field&gt;
            &lt;mat-select placeholder="Select a service" [(ngModel)]="selectedService" required (change)="changeService($event.value)"&gt;
              &lt;mat-optgroup *ngFor="let serviceGroup of serviceGroups" [label]="serviceGroup.serviceGroupName"&gt;
                &lt;mat-option *ngFor="let service of serviceGroup?.services" [value]="service"&gt;
                  {{service?.serviceName}}
                &lt;/mat-option&gt;
              &lt;/mat-optgroup&gt;
            &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
  
    ngOnInit() {
  this.serviceGroupService.serviceGroups.subscribe(sg =&gt; {});
  
  this.selectedService.serviceId = this.bookingservicetime.serviceTime.service.serviceId;
  this.selectedServiceTime = this.bookingservicetime.serviceTime;
  }
  </code></pre>
  
  <p>service.ts</p>
  
  <pre><code>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;
  }
  </code></pre>