Autocomplete

I have two autocomplete cascading each other, that means when i select a value in one autocomplete , another autocomplete values are populated. Now i need to make sure when ever i select values in first autocomplete, the other autocomplete input value should clear .

Also tried code from this below post but this does not work , it just clears first autocomplete values not second. https://mdbootstrap.com/support/angular/simulate-autocomplete-cancel-button/

                      </mdb-option>
                    </mdb-auto-completer>
                    <button (click)="onClick()" mdbBtn type="button">clear</button>
                  </div>
                </div>

                <div class="col-sm-12 col-md-6 mx-auto-my-5">
                  <div class="md-form">
                    <input mdbInput name="Account" id="Account" type="text" [ngModel]="searchAccountText | async"
                      (ngModelChange)="searchAccountText.next($event)"
                      class="completer-input form-control mdb-autocomplete mb-0" [mdbAutoCompleter]="auto2" />
                    <label for="Account" class="">Account</label>
                    <mdb-auto-completer   #auto2="mdbAutoCompleter" textNoResults="I have found no results.">
                      <mdb-option *ngFor="let option of accountresults | async" [value]="option.Name" (click)="onAccountSelect(option)">
                        <div class="d-flex flex-column">
                          {{ option.Name }}
                        </div>
                      </mdb-option>
                    </mdb-auto-completer>
                  </div>
                </div>

              </div>

onClick() { this.mdbAutoCompleter.clear(); }