mat autocomplete - how to set option not found

Question

How to set option not found for mat mat-autocomplete.

Below is my code:

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let item of items | async" [value]="item">
{{item.value}}
</mat-option>
</mat-autocomplete>

The equivalent element in AngularJS is

<md-autocomplete ...>
   <md-item-template>
      ...
   </md-item-template>
   <md-not-found>
      No item matching "{{myText}}" were found.
   </md-not-found>
</md-autocomplete>

What is the AngularJS md-not-found equivalent in mat-autocomplete

Answer 1

There's no such option at the moment in material design for Angular according to the autocomplete.ts source code, there's also a Github Issue #13013 "No implementation of md-not-found for Autocomplete in Angular2+" with a workaround.

Answer 2

as a work around I've added a custom validator which accepts drop down list as array and the selected value to check if the value exists.

Answer 3

I used disabled on the mat-option and mapped an empty result when the actual results were empty.

 <mat-option *ngFor="let result of results | async" [disabled]="result.id === 0" ...

 this.results = this.searchControl.valueChanges
  .pipe(
    filter(s => s !== ''),
    debounceTime(700),
    mergeMap(s=> this._getSearchFunction(s)),
    map(data => {
      if (data.length === 0) {
        data = [{ id: 0, displayName: 'No Results' }];
      }
      return data;
    })
  );