Check out example codes for "mat autocomplete async". It will help you in understanding the concepts better.

Code Example 1

this.usersForm = this.fb.group({
  userInput: null
})

this.filteredUsers = this.usersForm
  .get('userInput')
  .valueChanges
  .pipe(
    debounceTime(300),
    switchMap(value => this.appService.search({name: value}, 1))
);


<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let user of (filteredUsers | async)?.results" [value]="user">
    <span>{{ user.name }}</span>
    <small> | ID: {{user.id}}</small>
  </mat-option>
</mat-autocomplete>

Learn ReactJs, React Native from akashmittal.com