title: Setting default value of Mat-Select is not working
body: <p>I am creating an editAddress component. Before the editAddress component is called, I get all data from informationComponent and pass it to my a <code>service</code>. As soon as the editAdress component initializes, I get the values from the <code>service</code> and set it into my input boxes and also get the values from the database for all my other Mat-Select boxes. The problem is, my Mat-Select box should have a default value that is stored in the <code>service</code> and if they click on it, they should have all the options taken from the database. Please see my code below:</p>
  
  <pre><code>addressInitialData: any; // &lt;== will store data from service
  selectedType: string; // &lt;== will store the addresstype from the service
  
  ngOnInit() {
      this.getAddressTypes(); // &lt;== get all address types from database
      this.addressInitialData = this.genParams.addressToEdit; // &lt;== setting values from service to addressInitData
  
      // creating the form
      this.editAddressForm = this.fb.group({
        unitnumber: [this.addressInitialData.UnitNumber],
        housenumber: [this.addressInitialData.HouseNumber],
        streetname: [this.addressInitialData.StreetName],
        villagesubdivision: [this.addressInitialData.VillageSubdivision],
        barangaycode: [this.addressInitialData.BarangayCode, Validators.required],
        municipalcode: [this.addressInitialData.MunicipalCode, Validators.required],
        provincecode: [this.addressInitialData.ProvinceCode, Validators.required],
        regioncode: [this.addressInitialData.RegionCode, Validators.required],
        addresstypeid: [this.addressInitialData.AddressType, Validators.required] // &lt;== set the addresstype on the form (Mat-Select)
      });
  
      this.selectedType = this.addressInitialData.AddressType; // &lt;== using the ngModel
  } 
  
  getAddressTypes() {
      this.addressService.getAddressTypeList()
          .subscribe((data: any) =&gt; {
              this.addresstypes = data;
      });
  }
  
  // to get addresstypeid value
  get addresstypeid() {
      return this.editAddressForm.get('addresstypeid');
  }
  
  getAddressTypeIdError() {
      return this.municipalcode.hasError('required') ? 'Address type is required' : '';
  }
  
  onAddressTypeChange(event: MatOptionSelectionChange, type: any) {
      if (event.source.selected) {
          return;
      }
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;mat-form-field appearance="outline"&gt;
      &lt;mat-select placeholder="Type" formControlName="addresstypeid" [(ngModel)]="selectedType"&gt;
        &lt;mat-option&gt;--&lt;/mat-option&gt;
        &lt;mat-option *ngFor="let type of addresstypes" [value]="type.AddressTpyeId" (onSelectionChange)="onAddressTypeChange($event, type)"&gt;
          {{type.AddressTypeName}}
        &lt;/mat-option&gt;
      &lt;/mat-select&gt;
      &lt;mat-icon matSuffix&gt;contacts&lt;/mat-icon&gt;
      &lt;mat-error *ngIf="addresstypeid.invalid"&gt;
        &lt;mat-icon matSuffix&gt;block&lt;/mat-icon&gt; &amp;nbsp; {{getAddressTypeIdError()}}&lt;/mat-error&gt;
   &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I am using the ngModel since that is what I see in the answers I've researched but I would prefer not to because I would like to pass the whole form as like this:</p>
  
  <pre><code>this.addressService.EditAddress(this.editAddressForm.value)
  </code></pre>
  
  <p>UPDATE:
  This is what I came up so far and still I can't set the default value.</p>
  
  <pre><code>&lt;mat-form-field appearance="outline" style="margin-left: 10px; margin-top: 10px;"&gt;
  &lt;mat-select [(value)]="selectedType" placeholder="Address Type" formControlName="addresstypeid"&gt;
    &lt;mat-option&gt;--&lt;/mat-option&gt;
    &lt;mat-option *ngFor="let type of addresstypes" [value]="type.AddressTpyeId" &gt;
      {{type.AddressTypeName}} 
    &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  &lt;mat-icon matSuffix&gt;contacts&lt;/mat-icon&gt;
  &lt;mat-error *ngIf="addresstypeid.invalid"&gt;
    &lt;mat-icon matSuffix&gt;block&lt;/mat-icon&gt; &amp;nbsp; {{getAddressTypeIdError()}}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I checked by using the placeholder as <code>selectedType</code> and I can get the <code>selectedType</code> but not in the mat-select</p>