title: Angular material autocomplete component displays options on the footer instead of the header
body: <p>I created an angular component for my navbar which I want to implement a search function with autocomplete, I linked my backend and created services and it retrieves data perfectly, But the problem is it displays the retrieved data on the footer!!</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light mynavbar"&gt;
  &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
    &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
  &lt;/button&gt;
  
  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
    &lt;ul class="navbar-nav mr-auto"&gt;
      &lt;li class="nav-item active"&gt;
        &lt;a class="nav-link nav-link-r" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link nav-link-r" href="#"&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
        &lt;a class="nav-link dropdown-toggle nav-link-r" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          Dropdown
        &lt;/a&gt;
        &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
          &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
          &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
          &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
   &lt;div&gt; 
  
    &lt;!-- simple autocomplete component from material.angular.io --&gt;
    &lt;form class="example-form"&gt;
      &lt;mat-form-field class="example-full-width"&gt;
        &lt;input type="text"
               placeholder="Pick one"
               aria-label="Number"
               matInput
               [formControl]="myControl"
               [matAutocomplete]="auto"&gt;
        &lt;mat-autocomplete #auto="matAutocomplete"&gt;
          &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option"&gt;
            {{option}}
          &lt;/mat-option&gt;
        &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt;
    &lt;/form&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>the navbar is a template from bootstrap and the only additional CSS styles in this component are the following </p>
  
  <pre><code>.mynavbar{
  background-color: #6EB06B !important;
  }
  .nav-link-r{
  color: white !important;
  font-size: large;
  }
  .autofill-space{
  overflow: visible !important;
  }
  .option-items{
  color: tomato;
   }
  .example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
  }
  
  .example-full-width {
  width: 100%;
  }
  </code></pre>
  
  <p>I want the retrieved options to be displayed under the text input like in the original component but this keeps displaying it in the footer area skipping the entire website body, what am I doing wrong? </p>