title: Angular 6 cannot automatically select/bind dropdown list value from supplied object
body: <p>I get a country object from a service and bind it to a form that has a dropdown list of countries. The country doesn't appear selected after retrieving it from the service but all the other data is shown OK including a string gender field which is bound to a dropdown list. I can manually select the country from the list though. How can I automatically show the country as selected?</p>
  
  <p>personal-details.component.html</p>
  
  <pre><code>    &lt;form [formGroup]="form" (submit)="doSave(form.values)"&gt;
          &lt;mat-card class="main-card"&gt;
  
              &lt;mat-card-content&gt;
                  &lt;p&gt;Personal Details&lt;/p&gt;
                  &lt;mat-form-field class="full-width-input"&gt;
                    &lt;input matInput placeholder="Given name" formControlName="givenName" &gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field class="full-width-input"&gt;
                    &lt;input matInput placeholder="Surname" formControlName="surname" required&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field class="full-width-input"&gt;
                      &lt;mat-select placeholder="Select gender" formControlName="gender" required&gt;
                          &lt;mat-option *ngFor="let g of genders" [value]="g"&gt;{{g}}&lt;/mat-option&gt;
                      &lt;/mat-select&gt;      
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field class="full-width-input"&gt;
                      &lt;mat-select placeholder="Select country of birth" formControlName="countryBorn" required&gt;
                        &lt;mat-option *ngFor="let country of countries" [value]="country"&gt;{{country.name}}&lt;/mat-option&gt;
                      &lt;/mat-select&gt;      
                  &lt;/mat-form-field&gt;
              &lt;/mat-card-content&gt;
  
          &lt;/mat-card&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>personal-details.component.ts</p>
  
  <pre><code>  countries = [
      new Country('1100', 'Australia', '1'),
      new Country('1201', 'New Zealand', '160'),
      new Country('3105', 'Malta', '140')
    ];
    genders = ['F', 'M'];
  
    ngOnInit() {
      this.form = this.fb.group({
        givenName: ['', Validators.required],
        surname: ['', Validators.required],
        gender: ['', Validators.required],
        countryBorn: ''
      });
  
      this.response = this.applicantService.getDetails()
        .pipe(take(1), tap(resp =&gt; {
          this.form.patchValue(resp.personalDetails);
        }));
  
    }
  </code></pre>
  
  <p>domains:</p>
  
  <pre><code>export class PersonalDetails {
    givenName: string;
    surname: string;
    gender: string;
    countryBorn: Country;
  
    constructor(givenName?: string, surname?: string, gender?: string, countryBorn?: string) {
      this.id = id;
      this.surname = surname;
      this.gender = gender;
      this.countryBorn = countryBorn;
    }
  }  
  
  export class Country {
    id: string;
    name: string;
    displayOrder: string;
  
    constructor(id?: string, name?: string, displayOrder?: string) {
      this.id = id;
      this.name = name;
      this.displayOrder = displayOrder;
    }
  }
  </code></pre>
  
  <p>data:</p>
  
  <pre><code>incoming value from service: { "surname": "Oliver", "givenName": "Bert", "gender": "M", "countryBorn": { "id": "1201", "name": "New Zealand", "displayOrder": "160" }, "birthdate": "1990-04-21" }
  
  Form value on load ({{form.value | json }}) =  { "givenName": "Bert", "surname": "Oliver", "gender": "M", "countryBorn": { "id": "1201", "name": "New Zealand", "displayOrder": "160" }
  </code></pre>
  
  <p>Thanks</p>