But the http.get request is not debounced or throttled at all! If I type 10 characters in 3 seconds, it makes 10 http requests.
your implementing in a wrong way. you need capture input first, apply denounce and do HTTP request.
you can implement in several ways
1) Observable.fromEvent
<input type="text" #input>
Component
@ViewChild('input') text: ElementRef; ngAfterViewInit() { let text$ = Observable.fromEvent(this.text.nativeElement, 'keyup') .do(() => console.log("keyup")) .debounceTime(3000) .distinctUntilChanged() .switchMap(() => getCategoriesList()) .subscribe(res => console.log(res)); }
2) Using subject
<input type="text" (keyup)="search($event)">
component
searchTerms = new Subject<string>();search(term: string): void { this.searchTerms.next(term); }ngOnInit(): void { this.searchTerms .debounceTime(3000) .distinctUntilChanged() .switchMap(() => getCategoriesList()) .subscribe(term => { console.log(); });
3) Using form control
<input type="text" [formControl]="term">
component
term = new FormControl(); ngOnInit() { this.items = this.term.valueChanges .debounceTime(3000) .distinctUntilChanged() .switchMap(term => getCategoriesList(term)) .subscribe(res => console.log(res)); }