CODEWITHSUNDEEP
angularangular-material
Andre Elrico
Andre Elrico

Reputation: 11480

Material autocomplete with filter does not work with async data

I have prepared this Stackblitz the situation in my real app is very similar.

The data arrives later than the <app-async-complete> is rendered/ instatiated.

I already tried to trigger changeDetection manually but this also did not solve the issue.

Any quick tips?

What is important

When I click on the working "example" and on the "sync case" I get the suggestions already on the initial focus. However this is not the case for the "async case". I want the same behaviour.

Upvotes: 1

Views: 926

Answers (2)

Narayan Sikarwar
Narayan Sikarwar

Reputation: 384

You need to replace your code like below-

 options: string[] = [];
 @Input('options') set onOptions(options: string[]){
    this.options = options;
    this.initAutoComplete()
  }
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.initAutoComplete();
  }

  initAutoComplete(){
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

Upvotes: 3

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10137

It's working, but it crashed because of the error you're getting.

You will just have to guard for null:

private _filter(value: string): string[] {
  const filterValue = value.toLowerCase();

  // Here this.options can be null, so you get error when you .filter on null
  return this.options ? this.options.filter(option => option.toLowerCase().includes(filterValue)) : this.options;
  }

Upvotes: 1

Related Questions