Using typeahead with server data

Question

I am using ng-select with Angular 7 and have the following component:

export class PostComponent {

  selectedCategoryId: number;

  categories$: Observable<CategoryModel[]>;

  constructor(private categoryService: CategoryService) { }

  ngOnInit() {

    this.categories$ = this.getCategories('');

  }

  getCategories(term: string): Observable<CategoryModel[]> {

    return this.categoryService.get(term).pipe(map((envelope: Envelope<CategoryMessage.Response>) => 

      envelope.result.map((response: CategoryMessage.Response) => { 

        return {
          id: response.id, 
          name: response.name
        };

      })));

  }

}

The categoryService returns Categories where Category Name contains the term.

On the template I have the following:

<ng-select 
   class="select"
   [items]="categories$ | async"
   [addTag]="true"
   bindLabel="name"
   bindValue="id"
   [multiple]="false"
   [(ngModel)]="selectedCategoryId">
</ng-select>

Question

1. How can I call the API, through the service, only when the typed word has 3 or more letters? This would be to prevent getting thousands of categories.

2. How can I integrate my code to use typeahead?

Answer 1

Template:

<ng-select 
   class="select"
   [items]="categories$ | async"
   [addTag]="true"
   bindLabel="name"
   bindValue="id"
   [multiple]="false"
   [(ngModel)]="selectedCategoryId"
   (ngModelChange)="onModelChange($event)">
</ng-select>

Angular component:

public onModelChange(term) {
   if (term && term.length >= 3) {
      this.getCategories(term).subscribe(categories => {
         // You can put you logic here...
      });
   }
}

EDIT: Maybe you could also have a look at debounce function that is very usefull to prevent many requests during a typehead. Please check this example.