title: How to show selected option name inside the mat-select-trigger tags using Angular 7
body: <p>I am trying to show Subtext in selectbox as shown in the screenshot below.</p>
  
  <p><a href="https://i.stack.imgur.com/xM27c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xM27c.png" alt="enter image description here"></a></p>
  
  <p>my .html code is:</p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
    &lt;mat-select placeholder="country" [formControl]="country" &gt;
      &lt;mat-select-trigger&gt;
       {{country.name}}         
      &lt;/mat-select-trigger&gt;
      &lt;mat-option *ngFor="let country of countries" [value]="country"&gt;
        {{country.name}} 
        &lt;span class="example-additional-selection"&gt;
         Staff ID: {{country.id}}
        &lt;/span&gt;  
         &lt;span class="example-additional-selection"&gt;
         Staff Name:  {{country.firstname}}
        &lt;/span&gt;  
        &lt;span class="example-additional-selection"&gt;
         Staff Type:  {{country.staff}}
        &lt;/span&gt;
        &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>my .ts code is:</p>
  
  <pre><code>@Component({
    selector: 'select-custom-trigger-example',
    templateUrl: 'select-custom-trigger-example.html',
    styleUrls: ['select-custom-trigger-example.css'],
  })
  export class SelectCustomTriggerExample {
     countries = [
         {id: 1, name: "United States", staff: "Sales", firstname: "Mark"},
         {id: 2, name: "Australia", staff: "Sales", firstname: "John"},
         ...
       ];
    form: FormGroup;
  
    constructor() {
      this.form = new FormGroup({
        country: new FormControl(null)
      })
    }
  
    get country(): string {
      return this.form ? this.form.get('country').value : '';
    }
  }
  </code></pre>
  
  <p>I am able to list the subtexts in the selectbox but I am unable to show the selected value.
  When I put a static text inside the <code>mat-select-trigger</code> tags it works but when I put the variable <code>{{country.name}}</code> I get the following error</p>
  
  <blockquote>
    <p>Error: Cannot read property 'name' of null</p>
  </blockquote>
  
  <p>here is the stackblitz link: <a href="https://stackblitz.com/edit/angular-wd3vba-34arlh" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-wd3vba-34arlh</a>
  I would appreciate if you can have a look and tell me where I am doing wrong.</p>
  
  <p>Thank you.</p>