title: how to use NgIF condition with formcontrol instead of ngModel
body: <p>I want to compare my values using my <code>formcontrol</code> than using <code>ngModel</code>, when values is entered in my input box , I want to display my cancel image, so I given <code>userTextValue</code> as true inside subscribe, my query now is how to reset the value when cancel is clicked . I want the input box to be empty , now cancel button is hidden but still values available, I am using pipe to filter values.</p>
  
  <pre><code>&lt;input matInput class="form-control input" placeholder="Enter name or Id" id="user"
      [formControl]="userControl"[matAutocomplete]="auto&gt;
         &lt;img src="assets/icons/cancel.svg" *ngIf="userTextvalue" class="cancel-icon" 
          aria-label="Clear" (click)="clearUserValues()"&gt;
  </code></pre>
  
  <p>ts:</p>
  
  <pre><code>  constructor() {
      this.userControl.valueChanges.subscribe((user) =&gt; {
        this.filterResult = user;
        this.userTextvalue = true;
      });
    }
    clearUserValues() { 
      this.filterResult = "";
      this.userTextvalue = false;
    }
  </code></pre>
  
  <p>pipe.ts</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'filterUser'
  })
  export class FilterUserPipe implements PipeTransform {
  
    transform(items: any[], searchText: string): any[] {
      if (searchText &amp;&amp; searchText.length &gt; 1) {
        items = searchText ? this.filterUsers(items, searchText) : items.slice();
      } else {
        items = [];
      }
      return items;
    }
  
    filterUsers(items: any[], value: string): any[] {
      const filterValue = value.toLowerCase();
      return items.filter(item =&gt; item.name.toLowerCase().indexOf(filterValue) === 0);
    }
  
  }
  </code></pre>