Angular5 - How to detect empty or deleted field in mat-autocomplete?

Question

This is my html which contains the material autocomplete.

<ng-container *ngSwitchCase="'autocomplete'">
    <div [ngClass]="(filter.cssClass || 'col-md-4') + ' mt-2 pt-1'">
        <div class="filter-key-label">
            {{filter.columnTitle}}
        </div>
        <div class="filter-form-control d-flex flex-wrap justify-content-left">
        <mat-form-field class="full-width">
            <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" ng-model="blah">
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let option of getOptionsTypeAhead(filter.key) | async" [value]="option" (onSelectionChange)="typeaheadChange($event, filter.key)">
                {{ option }}
                </mat-option>
            </mat-autocomplete>
            </mat-form-field>
        </div>
    </div>
</ng-container>

Currently I am able to detect only selection changes using onSelectionChange but it so not detects if the field is empty initially or when after having selected an item and then deleting it, I do not select anything and shift focus out of the input field.

How do I detect that?

I tried onkeypress, ng-change coupled with ng-model (was not very sure how to use that) and change but nothing worked. Is there some provision already present by the library or do we detect the change and input field value?

Answer 1

Solved it! It was change all the time.

The best part is that it doesn't behave like onkeypress and only fires when there is an blur event.

I changed my <input> like this:

<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" (change)="handleEmptyInput($event, filter.key)">

The controller looks something like this:

handleEmptyInput(event: any, key: string){
  if(event.target.value === '') {
    delete this.filtersApplied[key];
  }
}

Just like how I wanted to capture instances of empty fields or blank values :)