MatAutocomplete with observables

Question

I'm using Material Autocomplete component.

First letter I type into the input, it works as expected, but it fails next.

That's obviously because I set a new value for this.filteredUnitName:

export class ActionDetailComponent {
    @Input() unitNames: Observable<string[]>;

    filteredUnitNames: Observable<string[]>;

    unitName: FormControl = new FormControl();

    ngOnInit() {
        this.filteredUnitNames = this.unitName.valueChanges
            .startWith(null)
            .do(val => {
                if (val) {
                    this.filteredUnitNames = this.filter(val); // bad line
                }
            });
    }

    filter(val: string): Observable<string[]> {
        return this.unitNames
            .map(response => response.filter(
                option => option.toLowerCase().indexOf(val.toLowerCase()) === 0
            ));
    }

Here is my template :

<mat-form-field>
    <input matInput placeholder="Unit name" class="form-control" [formControl]="unitName" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let name of filteredUnitNames | async" [value]="name">
        <span>{{name}}</span>
    </mat-option>
    </mat-autocomplete>
</mat-form-field>

Is there another way to make this working properly ?

Answer 1

You can achieve this with the switchMap operator, so change your code to the following:

import "rxjs/add/operator/switchMap";


ngOnInit() {
  this.filteredUnitNames = this.unitName.valueChanges
    .startWith(null)
    .switchMap(val => {
      return this.filter(val || '')
   })
}

filter(val: string): string[] {
  return this.unitNames
    .map(response => response.filter(option => { 
       return option.toLowerCase().indexOf(val.toLowerCase()) === 0
    }));
}

DEMO: https://plnkr.co/edit/yb4NeYTbGkwHay15R8CW?p=preview