I am utilizing ng-select with Angular 7 and creating the following component:
export class PostComponent {
selectedCategoryID: number;
allCategories$: Observable<CategoryModel[]>;
constructor(private catService: CategoryService) { }
ngOnInit() {
this.allCategories$ = this.getCategories('');
}
getCategories(typedTerm: string): Observable<CategoryModel[]> {
return this.catService.fetch(typedTerm).pipe(map((envelop: Envelope<CategoryMessage.Response>) =>
envelop.data.map((response: CategoryMessage.Response) => {
return {
id: response.id,
name: response.name
};
})));
}
}
The service catService retrieves categories where the term is found in the category name.
In the template, I have the following:
<ng-select
class="select"
[items]="allCategories$ | async"
[addTag]="true"
bindLabel="name"
bindValue="id"
[multiple]="false"
[(ngModel)]="selectedCategoryID">
</ng-select>
Inquiry
How can I efficiently call the API through the service only when the user types 3 or more letters to avoid overwhelming data retrieval?
Is there a way to incorporate typeahead functionality into my existing code?