Not displaying values until another button is pressed #216
Description
To reopen this other bug
#83
I'm using the autocomplete and the data it's displaying comes from a 3rd party API.
The issue I'm having is that when the first query runs it doesn't display anything and it just shows the NotFound message.
And in other cases, show Not Found message all times (and i checked that data var is filled)
So, I have the minQueryLength set to 3. When you start writing and hit the 3rd character we call a function that makes a 3rd party API call and returns the values. While all this is happening the input is set to loading, when the data comes back and it's ready to be used we set the input to not loading.
Even tho we have the data (in the correct format) the input will display the not found message, at this point if I press any button that doesn't modify the string (left arrow, right arrow, etc) it makes the query again and this time it displays the right information.
I cannot reply exactly in stackblitz, but the error is similar, since data is loaded in the variable, but autocomplete show non items template
https://stackblitz.com/edit/angular13-validation-rqxgbb
To reproduce, you can use this function
onChangeSearch(event: any): void {
console.log('onChangeSearch');
this.loadingAutocomplete = true;
console.log(event);
this.autocomplete = [];
this.http
.get(
https://fmpcloud.io/api/v3/search?query=${event}&limit=10&apikey=fec2976652d9896caec33a4c64bf1a69
)
.subscribe((data: any) => {
data.forEach((element) => {
this.autocomplete.push({
name: element.name,
});
});
setTimeout(() => {
console.log(this.autocomplete);
this.loadingAutocomplete = false;
}, 100);
});
}
And this html
<ng-autocomplete
[data]="autocomplete"
[searchKeyword]="'name'"
(inputChanged)="onChangeSearch($event)"
[itemTemplate]="itemTemplate"
[isLoading]="loadingAutocomplete"
[notFoundTemplate]="notFoundTemplate"
[minQueryLength]="3"
Name: {{ item.name }}
<ng-template #notFoundTemplate let-notFound>