title: Angular mat-autocomplete with highlight pipe issue
body: <p>I have one scenario where I'm using mat-autocomplete with custom highlight pipe. Everything works fine, issue is coming when I select a value from autocomplete and then I try to reset the form, form is getting reset but the value in the autocomplete is still highlighted.</p>
  
  <p>highlight.pipe.ts </p>
  
  <pre><code>transform(text: string, search): string {
      const pattern = search
        .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&amp;")
        .split(' ')
        .filter(t =&gt; t.length &gt; 0)
        .join('|');
      const regex = new RegExp(pattern, 'gi');
      return search ? text.replace(regex, match =&gt; `&lt;b&gt;${match}&lt;/b&gt;`) : text;
    }
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;form class="example-form"&gt;
      &lt;mat-form-field class="example-full-width"&gt;
          &lt;input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl"&gt;
          &lt;mat-autocomplete #auto="matAutocomplete"&gt;
              &lt;mat-option *ngFor="let state of filteredStates | async" [value]="state.name"&gt;
          &lt;span [innerHTML]="state.name | highLight: toHighlight"&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;/span&gt;
              &lt;/mat-option&gt;
          &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-nue8pb-raxd95" rel="nofollow noreferrer">Stackblitz Demo</a></p>
  
  <p>On click of reset I don't want any value to be highlighted. Is there any way to fix this issue. </p>
  
  <p>Thanks in advance</p>