title: Angular 5+ Material Autocomplete with wrong position
body: <p>i am trying to do the <a href="https://material.angular.io/components/autocomplete/examples" rel="nofollow noreferrer">example</a> provided in the angular material website for autocomplete and when i implement it in the application the options appear somewhere else and not under the input as shown <a href="https://i.stack.imgur.com/wWZD6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wWZD6.jpg" alt="enter image description here"></a></p>
  
  <p>i currently have the following code in the <strong>html file</strong></p>
  
  <pre><code>&lt;form class="example-form"&gt;
      &lt;mat-form-field class="example-full-width"&gt;
        &lt;input matInput placeholder="State" aria-label="State" 
         [matAutocomplete]="auto" [formControl]="stateCtrl"&gt;
        &lt;mat-autocomplete #auto="matAutocomplete"&gt;
          &lt;mat-option *ngFor="let state of filteredStates | async" 
            [value]="state.name"&gt;
            &lt;img class="example-option-img" aria-hidden [src]="state.flag" 
              height="25"&gt;
            &lt;span&gt;{{state.name}}&lt;/span&gt; |
            &lt;small&gt;Population: {{state.population}}&lt;/small&gt;
          &lt;/mat-option&gt;
        &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and this is what i have in the <strong>component.ts file</strong></p>
  
  <pre><code>import { FormControl } from '@angular/forms';
  import { Observable } from 'rxjs';
  import { map, startWith } from 'rxjs/operators';
  
    stateCtrl = new FormControl();
    filteredStates: Observable &lt; State[] &gt;;
  
    states: State[] = [
      {
        name: 'Arkansas',
        population: '2.978M',
        // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
        flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
      }, {
        name: 'California',
        population: '39.14M',
        // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
        flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
      }, {
        name: 'Florida',
        population: '20.27M',
        // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
        flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
      }, {
        name: 'Texas',
        population: '27.47M',
        // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
        flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
      }
    ];
  
    constructor() {
      this.filteredStates = this.stateCtrl.valueChanges.pipe(startWith(''),
        map(state =&gt; state ? this._filterStates(state) : this.states.slice()));
    }
  
    private _filterStates(value: string): State[] {
      const filterValue = value.toLowerCase();
      return this.states.filter(state =&gt; state.name.toLowerCase().indexOf(filterValue) === 0);
  }
  </code></pre>
  
  <p>and in my <strong>app.module.ts</strong> i have the <em>formsmodule</em> and <em>reactiveformsmodule</em> inside of imports.</p>
  
  <p>any idea why the options are not appearing under the input and how to fix the issue will be appreciated.</p>
  
  <p>Forgot to add, this child component (autocomplete) is called by the parent component as follows.</p>
  
  <pre><code>&lt;div&gt;
  ...
    &lt;app-menu&gt;&lt;/app-menu&gt;
  ...
  &lt;/div&gt;
  </code></pre>