how to show drop down list when button is click in Angular

[Jonathan Hrang]

I have a user input box with autocomplete and I'm adding a button on the right side so that a user can click and see the drop down list immediately without having to type something first but I'm not sure why drop down list is not showing when I click the button for the first time when the browser is refreshed..

Right now the button only work (show dropdown list) when I type something first in the input box and clear it. 

I'll be really appreciated if I get any help or suggestion on how to make this work.

HTML

```

    <mat-form-field class="form" appearance="fill">

        <mat-label>Select or Type out a Super Tag</mat-label>

        <mat-chip-list #chipList>

            <div>

                <mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"

                    (removed)="remove(superTag)">

                    <img class="super-icon" src="/assets/images/icons/super-tag-icon.svg">

                    {{superTag.tag}}

                    <mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag">cancel</mat-icon>

                </mat-chip>

            </div>

            <div>

                <input matInput  #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"

                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()">

            </div>

        </mat-chip-list>

        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" autoActiveFirstOption>

            <mat-option *ngIf="isLoading" class="is-Loading">

                <mat-spinner diameter="20"></mat-spinner>

            </mat-option>

            <ng-container *ngIf="!isLoading">

                <mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">

                    {{tag}}

                </mat-option>

            </ng-container>

        </mat-autocomplete>

        <button mat-icon-button

        matSuffix

        (click)="openPanel($event)"

        color="primary">

    <mat-icon aria-label="Add New State">arrow_drop_down</mat-icon>

  </button>

    </mat-form-field>

```

TS

````

import { MatAutocompleteTrigger } from '@angular/material/autocomplete';

  @ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger}) inputAutoComplit: MatAutocompleteTrigger;

  @ViewChild('autoTrigger', { read: MatAutocompleteTrigger })

  autoTrigger: MatAutocompleteTrigger;

  openPanel(evt): void {

    evt.stopPropagation();

    this.inputAutoComplit.openPanel();

  }

[Jonathan Hrang]