angular - Ng-Bootstrap Typeahead Incorrect Style With Google Maps Place Autocomplete -

i'm developing angular 4 application uses ng-bootstrap's typeahead directive. in wikipedia example, make api call wikipedia , display results in typeahead box. i'm attempting same thing instead google map's place autocomplete service.

following wikipedia example, i've created similar service returns rxjs observable contains autocompleted places.

search(term: string) {     if (term === '') {       return observable.of([]);     }      return observable.create(observer => {         this.autocompleteservice.getplacepredictions({ input: term }, (results, status) => {           if (status == google.maps.places.placesservicestatus.ok) {             observer.next(results.map(result => result.description));             observer.complete();           } else {             console.log('error - ', results, ' & status - ', status);             observer.next({});             observer.complete();           }         });     }); } 

on controller side, code looks this:

search = (text$: observable<string>) =>     text$         .debouncetime(300)         .distinctuntilchanged()         .switchmap(term =>             this.service.search(term)                 .do(() => this.searchfailed = false)                 .catch(() => {                     this.searchfailed = true;                     return observable.of([]);                 })) 

this works well, reason, typeahead bar appears in incorrect location until triggers redraw.

note gap between input field , typeahead on top image

pressing key or clicking anywhere on screen instantly corrects it, can't figure out how correct first time.

from research, seems issue google maps place autocomplete service running outside of ngzone , not triggering redraw, i've had no luck of usual strategies manually force redraw (applicationref.tick(), ngzone.run(), changedetectorref.detectchanges()).

any suggestions appreciated!

edit: plunker similar behavior: https://embed.plnkr.co/iy2zhd5rehbk2avbbqsb/

i got it! ngzone ended doing trick, had put inside callback, rather wrapping it.

search(term: string) {   if (term === '') {     return observable.of([]);   }    let result = observable.create(observer => {     this.autocompleteservice.getplacepredictions({ input: term }, (results, status) => {       this.ngzone.run(() => {         if (status == google.maps.places.placesservicestatus.ok) {           observer.next(results.map(result => result.description));           observer.complete();         } else {           console.log('error - ', results, ' & status - ', status);           observer.next({});           observer.complete();         }       });     });   });   return result; }