title: How to clear mat- autocomplete when no option is selected from autocomplete dropdown
body: <p>I have successfully implemented mat-autocomplete and it is working fine if selected from auto complete drop down. I am facing issues when i have typed in some text and navigate to other fields without selecting below dropped in auto complete fields. It retains the value typed in autocomplete field.</p>
  
  <p>I have used below approach to fix this issue - </p>
  
  <ol>
  <li><p>MatAutocompleteTrigger - Below code I have used in ts file - </p>
  
  <pre><code>  @ViewChild('autoCompleteInput', { static: false,read: MatAutocompleteTrigger })  trigger: MatAutocompleteTrigger;
  .
  .
  .
  this.trigger.panelClosingActions
    .subscribe(e =&gt; {
     if (!(e &amp;&amp; e.source)) {
     this.accountForm.get('accountId').setValue="";
     this.account.accountId = null;
     }
  })
  </code></pre>
  
  <p>First of all , i am unable to keep it in any angular life cycle hook. This trigger doesn't get initialized during angular lifecycle hooks, but later while it receives any values form mat-autocomplete.So it clears value as soon I type in text in field(keeping the below autocomplete list; which doesn't look good)</p>
  
  <p>2.Used observalble on filterOptions(Obserable on my autocomplete field) - I have used below code for i t - </p>
  
  <pre><code> this.filteredOptions = this.accountForm.get('accountId').valueChanges.pipe(
    debounceTime(250),
    distinctUntilChanged(),
    filter(searchString =&gt; typeof searchString === 'string'),
    filter(searchString =&gt; searchString.length &gt; 0),
    switchMap(searchString =&gt; {
      return this.accountService.autoCompleteBrokerSearch(searchString);
    })
  );
  this.filteredOptions.takeUntil(this.ngUnsubscribe).subscribe((lookups: accountEntityModel[]) =&gt; {
    if (lookups.length === 0) {
      this.account.accountId = null;
      this.accountForm.get('accountId').patchValue('');
    }
    if(lookups.find(value =&gt; value.id !== this.account.id)){
      this.account.accountId = null;
      this.accountForm.get('accountId').patchValue('');
    }
  });
  </code></pre></li>
  </ol>
  
  <p>with Template code - </p>
  
  <pre><code>&lt;mat-form-field  appearance="standard" &gt;
  &lt;mat-label&gt;{{ 'account.enterAccount' | translate }}&lt;/mat-label&gt;
  &lt;input
   matInput
   formControlName="accountId"
   class="search-select"
   [matAutocomplete] = "accountAutocomplete"
  #autoCompleteInput="matAutocompleteTrigger"&gt;
  &lt;mat-autocomplete #accountAutocomplete = "matAutocomplete" [displayWith]="displayFn.bind(this)" &gt;
  
      &lt;mat-option [value]="accountOption" *ngFor="let accountOption of filteredOptions | async" (onSelectionChange)="onEnteredAccount(accountOption)" &gt;{{
          accountOption.description
        }}&lt;/mat-option&gt;
  
  &lt;/mat-autocomplete&gt;
  
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I only require to clear the field if we have not selected anything from auto complete, and it should clear field values from form too.</p>