title: Binding 'this' in Angular Material Autocomplete displayWith using Angular 5
body: <p>I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like</p>
  
  <pre><code>displayFn(id) {
   return this.getValue(id)
  }
  getValue(id) {
   /**return some string
  }
  </code></pre>
  
  <p><strong>For the autocomplete</strong></p>
  
  <pre><code>&lt;mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn"&gt;
    &lt;mat-option *ngFor="let option of outletFilterOptions | async [value]="option.outletId"&gt;
     {{ option.outletName }}
    &lt;/mat-option&gt;
  &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <p>As you see I am using the <code>id</code> as the model instead of the entire object. </p>
  
  <p>When the display function returned an error that this.getValue is undefined I searched Stack Overflow for a solution and was suggested that I use something like <code>[displayWith]="displayFn.bind(this)"</code>. </p>
  
  <p>But unfortunately, that isn't working for me either. I am using <strong>Angular material 5.1.0.</strong></p>
  
  <p>Is there something I am missing?</p>