I’m tying to use googlemap place autoComplete in my project, but it gives me an error:
TypeError: Cannot read property 'getInputElement' of undefined
.html
<section
[formGroupName]="i"
*ngFor="let tech of form.controls.technologies.controls; let i = index">
<ion-item-group>
<ion-item-divider color="light">Station #{{ i + 1 }}</ion-item-divider>
<ion-item>
<ion-label position="floating">Technology name:</ion-label>
<ion-input
#autoCompleteStation
type="text"
maxlength="50"
formControlName="name"></ion-input>
</ion-item>
</ion-item-group>
</section>
.ts
@ViewChild('autoCompleteStation', {static: true}) autoCompleteStation: any;
ngAfterViewInit(): void {
this.autoCompleteStation.getInputElement().then((input:HTMLInputElement)=>{
var autocomplete2 = new google.maps.places.Autocomplete(input, {
//somee code
});
}
});
PS: when I remove the fro loop it works, but when I add it again it gives the error above. any suggestions please ?