How to use google place autocmplete using form reactive ionic 4

#1

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 ?