I have implemented an Algolia Places input within an ngFor loop using Angular8. The issue I am facing is that the (change) event only works properly after typing in the input for the second time. While this is functional, it's not exactly the behavior I desire.
It seems like the connection between the function and the input is not automatically established when the input is created. I would like to know how to successfully link the input with the function - any suggestions?
Here is the HTML part:
<ng-container *ngFor="let place of places; let i = index;">
<input id="{{ 'inputaddress' + i}}" (change)="addressSearchIndex(i)" type="text" class="form-control" />
</ng-container>
And here is the Component.ts part:
addressSearchIndex(index) {
this.placesAutocompleteAddress = placesAlgolia({
appId: <ID>,
apiKey: <Key>,
container: document.querySelector('#inputaddress'+index),
templates: {
value: function(suggestion) {
return suggestion.name;
}
}
}).configure({
type: 'address'
});
this.placesAutocompleteAddress.on('change', function resultSelected(e) {
this.lat = e.suggestion.latlng["lat"];
this.lng = e.suggestion.latlng["lng"];
});
}