I'm facing an issue while trying to develop a customized typeahead feature that is supposed to search my API every time the user inputs something, but it's not functioning as expected. The autocomplete() function isn't even getting accessed. I am working with Angular 4 CLI (1.4.2), bootstrap 4, and ngx-bootstrap (1.9.3). Can you spot what might be going wrong here?
component.ts
public autoCompleteRef = this.autoComplete.bind(this);
public autoComplete() {
let searchParams = new URLSearchParams();
searchParams.set('search', this.autoCompleteSearchTerm);
return this.http.get(this.api_url, {search: searchParams, headers: headers})
.map(res => res.json())
.map((el)=> {
return el.map((data)=> {
return ({id: data.id, name: data.name});
});
})
.toPromise();
}
public typeaheadOnSelect(e): void {
console.log('Selected value: ', e.value);
}
html
<input class="form-control"
[(ngModel)]="autoCompleteSearchTerm"
[typeahead]="autoCompleteRef"
[typeaheadOptionField]="'name'"
[typeaheadWaitMs]="300"
[typeaheadMinLength]="1"
(typeaheadOnSelect)="typeaheadOnSelect($event)">