title: Create reusable matAutocomplete directive
body: <p>I would like to implement a component or directive to use with the Angular Material <a href="https://material.angular.io/components/autocomplete/overview" rel="nofollow noreferrer">autocomplete component</a>. However I am having difficulty figuring out how to encapsulate the business logic and wire it up while still exposing the input element so it is easy to style and add accessibility.</p>
  
  <p>Ideally I would like to have a directive I can just add to the input but my understanding is that you need to instantiate the <code>&lt;mat-autocomplete&gt;</code> component. Therefore I've tried to create a component to instantiate the <code>&lt;mat-option&gt;</code> list.</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'employee-search',
    exportAs: 'employeeSearch',
    template: `
      &lt;mat-option *ngFor="let employee of employees | async" [value]="employee.globalId"&gt;
        &lt;span&gt;
          &lt;span&gt;{{ employee.name }}&lt;/span&gt; |
          &lt;small&gt;{{ employee.globalId }}&lt;/small&gt;
        &lt;/span&gt;
      &lt;/mat-option&gt;
    `,
  })
  export class EmployeeComponent implements OnInit {
    control = new FormControl();
    employees: Observable&lt;any[]&gt;;
  
    constructor(private rest: MyRestService) { }
  
    ngOnInit() {
      this.employees = this.control.valueChanges
      .filter((value: string) =&gt; value &amp;&amp; value.length &gt;= 3)
      .debounceTime(300)
      switchMap((value: string) =&gt; this.loadEmployees(value));
    }
  
    loadEmployees(searchInput: string): Observable&lt;any[]&gt; {
      return this.rest.get('/employees', { filter: searchInput });
    }
  }
  </code></pre>
  
  <p>I've tried to use this component within the <code>&lt;mat-autocomplete&gt;</code> component and it does seem to be making the http call to load the data but the options are not loading.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
    &lt;input matInput placeholder="Employee" aria-label="Employee"
        [matAutocomplete]="auto"
        [formControl]="employee.control"&gt;
  &lt;/mat-form-field&gt;
  &lt;mat-autocomplete #auto="matAutocomplete"&gt;
    &lt;employee-search #employee="employeeSearch"&gt;&lt;/employee-search&gt;
  &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <p>How can I create a component or directive to make an input show my custom autocomplete list?</p>