autocomplete taking time to render for first time-CodePudding

I have an input field where i am searching for locations through bing api.

this.addressForm
  .get('queryField')
  .valueChanges.debounceTime(100)
  .distinctUntilChanged()
  .switchMap(query => this.onChangeSearch(query))
  .subscribe(res => {
    console.log(res);
  });

Note:

When we load the app, for the First time when i enter only 1 character in the field, its taking couple of seconds to render the view. The API response is fine, but the list gets populated after couple of seconds.

This does not happen from second time onwards.

CodePudding user response：

Change detection - here's the fork: https://stackblitz.com/edit/angular-ng-autocomplete-7ryhdv?file=src/app/app.component.ts

These are the lines:

  constructor(
    private bingApiLoader: BingApiLoaderService,
    private fg: FormBuilder,
    private ref: ChangeDetectorRef <- ADD THIS
  ) {}

...

    this.manager.getSuggestions(search, res => {
      this.countries = res.map(r => {
        return {
          formattedSuggestion: r.formattedSuggestion,
          address: r.address
        };
      });
      this.results = this.countries;
      this.ref.detectChanges(); <- AND THIS
    });

In reality, you should be using observables for everything (instead of instance members) and your template should just be subscribing to them.

Here's an example of what I mean. https://stackblitz.com/edit/angular-ivy-k47m7k

It uses a package I wrote a long time ago (ignore the package itself) but just pay attention to how there are no instance members and all the template does is subscribe to observables with async pipe.

I've seen a lot of very experienced angular devs do exactly what the OP has done regarding stateful components* - just create some instance members, call detectChanges() when they feel like they have to. But in reality, when you are dealing with a stateful component, your template should just be subscribing to observables.

*A stateful component is a component that has created some sort of data that it will pass on to child components.