how to create google autocomplete in bootstrap modal in angular 2+?

Question

I am using angular google maps (agm) i created google autocomplete by below way.

in html

  <input type="text" #pick id="address" class="form-control" [(ngModel)]="pickAddress" name="pickAddress" (ngModelChange)="pickAdd()" placeholder="Pick Up Address" onclick="return false" style="padding-left: 30px;border-radius: 25px;border: 1px solid #31708f;"

in Ts File:

pickAdd() {
  var autocomplete:any;
  var options = { componentRestrictions: {country: "IN"} };
  this. inputAddress = document.getElementById('address');
  autocomplete = new 
  google.maps.places.Autocomplete(this.inputAddress,options)
  google.maps.event.addListener(autocomplete, 'place_changed', ()=> {
    this.ngZone.run(() => {
      this.zoom=8;
      var place = autocomplete.getPlace();
      this.lat = place.geometry.location.lat();
      this.lng = place.geometry.location.lng();
      this.getGeoLocation(this.lat,this.lng);
    });
  });
}

css:

sebm-google-map {
    height: 300px;
}

if I put the above code in bootstrap modal, google autocomplete is not working

Note:

above code is working without bootstrap modal(in normal view)

Answer 1

It works in normal view, and it doesn't work in a modal, so I guess your issue is about z-index css property.

The solution is to set the google autocomplete item's z-index more than the modal bootstrap z-index:

 .pac-container {
    z-index: 1054 !important;
 }

Source: https://github.com/twbs/bootstrap/issues/4160

I'm sure this is the problem because if you just followed all instruction for ngx-bootstrap modal & AGM (you're using an old version is sebm-google-map ) you will notice that there are no error but only the autocomplete item are not showing.

Look in this plunker I created (angular, ngx-bootstrap, angular-google-maps) and all is fine:

https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/