Как сделать окно поиска Gmail одинаковым с angular материалом?

Question

Я использую материал с angular v9 / v8. И я хочу сделать компонент так же, как в окне поиска Gmail. такое же поведение: когда я нажимаю на правую кнопку рядом с полем ввода, внизу появляется панель / панель с. (не важно для меня, что содержится в этом div).

Так что я думаю сделать это с помощью matInput и matMenu. но это не получается, как я ожидал.

• Div закрывает, я нажимаю на него.
• Не открывается под текстовым полем (он открывается под вводом), не сохранить ширину ввода.

Как исправить с помощью angular материала?

<mat-form-field class="example-form-field">
  <mat-label>Search</mat-label>
  <input matInput type="text" [(ngModel)]="value">
  <button [matMenuTriggerFor]="menu" mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear">
    <mat-icon>keyboard_arrow_down</mat-icon>
  </button>
</mat-form-field>

<mat-menu #menu="matMenu" >
  <form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Company (disabled)</mat-label>
    <input matInput disabled value="Google">
  </mat-form-field>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><mat-form-field class="example-full-width">
      <mat-label>First name</mat-label>
      <input matInput>
    </mat-form-field></td>
    <td><mat-form-field class="example-full-width">
      <mat-label>Long Last Name That Will Be Truncated</mat-label>
      <input matInput>
    </mat-form-field></td>
  </tr></table>

  <p>
    <mat-form-field class="example-full-width">
      <mat-label>Address</mat-label>
      <textarea matInput placeholder="Ex. 100 Main St">1600 Amphitheatre Pkwy</textarea>
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <mat-label>Address 2</mat-label>
      <textarea matInput></textarea>
    </mat-form-field>
  </p>
</form>
</mat-menu>