title: Displaying ngModel value for mat-select
body: <p>I am using Angular Material Select to display holidays. When the user selects a holiday, I would like to display the date instead of the holiday name. For example, if the user selects "Christmas", I want the selected value to should show "December 25"</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-select [(ngModel)]="selectedHoliday" placeholder="Select A Holiday" (change)="eventSelection($event.value)"&gt;
      &lt;mat-option *ngFor="let holiday of holidays" [value]="holiday"&gt;{{ holiday.name }}&lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I set ngmodel to the correct date on select change:</p>
  
  <pre><code>selectedHoliday: string;
  
  holidays = [
   { name: 'Christmas', date: 'Dec 25'} ,
   { name: 'New Years', date: 'Jan 1'}
  ]
  
  
  eventSelection(event){
   this.selectedHoliday = event.date
  }
  </code></pre>
  
  <p>When I set selectedHoliday to the date, nothing displays as the selected value. Here is a plunker: <a href="https://plnkr.co/edit/9lhHJhNyuWUxqYF6nMwK?p=preview" rel="noreferrer">https://plnkr.co/edit/9lhHJhNyuWUxqYF6nMwK?p=preview</a></p>