Typeahead: how to force the change detection - ngx-bootstrap

Question

I have a question regarding the TypeAhead as I didn't want to pollute the git space backlog.
I setup the typeahead to work with my own observable based on the async demo (I'm pulling the google prediction data) and the typehead kind of works, but has the refresh (or change detection) issue where I'm typing the correct address but the highlighted results are always one or two letters 'behind' in terms of highlighting, or the results are missing as the search might have been narrowed down. The component does update if I for example press the key left or right, which tells me there must be some detection issue.
If there any way I could force it do detect changes? I've tried to run the change detector right after the asyncaction but that didn't help. Thanks heaps
Here is the stackblitz code
https://stackblitz.com/edit/angular-ufgm4x
To see what I struggle to understand where is the delay, try to follow these steps:
quickly type in e.g. '30 Manni'
wait for the response, wait a little, let's say 3 sec
then press 'k' and wait and don't interact with the app...wait and then only after couple of seconds the component updates (match highlight). Or press 'k', wait a little and interact with the app and you will see the highlight kicks-in.
It appears that this is not the google place lookup response time as they are quite good. There must be something else.
This odd behavior is especially noticeable with the search delay
[typeaheadWaitMs]="1000"
export class TypeaheadComponent {
asyncSelected: string;
typeaheadLoading: boolean;
typeaheadNoResults: boolean;
dataSource: Observable<any>;
constructor(private geocoder: GeocodeService,
private chd: ChangeDetectorRef,
private zone: NgZone) {
this.dataSource = Observable.create((observer: any) => {
// Runs on every search
observer.next(this.asyncSelected);
}).mergeMap((token: string) => this.geocoder.getSuggestions(token)).do(() => {
setTimeout(() => {
this.chd.detectChanges(); // --> Doesn't do anything
}, 200);
});
}
changeTypeaheadLoading(e: boolean): void {
this.typeaheadLoading = e;
}
typeaheadOnSelect(e: TypeaheadMatch): void {
console.log('Selected value: ', e.value);
}
}
public getSuggestions(keyword: string): Observable<object> {
if (typeof google === 'undefined') {
return new Observable<object>();
}
const autocompleter = new google.maps.places.AutocompleteService();
return new Observable<object>((observer) => {
// Prepare the callback for the autocomplete
const onPredictionsReady = (predictions: any[]) => {
observer.next(predictions || []);
observer.complete();
};
// do the search
autocompleter.getPlacePredictions({ input: keyword }, onPredictionsReady);
});
}

Answer 1

I had the same problem, here's how I solved it:
My service:
import {Injectable} from '#angular/core';
import {MapsAPILoader} from '#agm/core';
import {Observable} from 'rxjs/Rx';
import {} from 'googlemaps';
#Injectable()
export class GooglePlacesService {
googleAutocompleteService;
constructor(private mapsAPILoader: MapsAPILoader) {
this.mapsAPILoader.load().then(() => {
this.googleAutocompleteService = new google.maps.places.AutocompleteService();
});
}
getPredictions(inputText: string) {
const callback = this.googleAutocompleteService.getPlacePredictions.bind(this.googleAutocompleteService);
const observable = Observable.bindCallback(callback, (predictions, status) => {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
return [];
} else {
return predictions;
}
});
return observable({
input: inputText
});
}
}
My component (ts):
import {Component, NgZone, OnInit} from '#angular/core';
import {} from 'googlemaps';
import {Observable} from 'rxjs/Observable';
import AutocompletePrediction = google.maps.places.AutocompletePrediction;
import {GooglePlacesService} from '../../api/google-places.service';
#Component({
selector: 'search-location-input',
templateUrl: './search-location-input.component.html',
styleUrls: ['./search-location-input.component.css']
})
export class SearchLocationInputComponent implements OnInit {
inputText = '';
predictions: Observable<AutocompletePrediction[]>;
constructor(private googlePlacesService: GooglePlacesService,
private ngZone: NgZone) {
}
ngOnInit() {
this.predictions = Observable.create((observer: any) => {
this.googlePlacesService.getPredictions(this.inputText)
.subscribe((result: any) => {
this.ngZone.run(() => observer.next(result));
});
});
}
}
My component (html):
<input [(ngModel)]="inputText"
[typeahead]="predictions"
typeaheadOptionField="description"
[typeaheadWaitMs]="200"
type="text">