I have created a simple search function for my app using the FromEvent KeyUp and debounceTime features as shown in the code below:
<input matInput #inputSearch>
@ViewChild('inputSearch', { static: false }) input: ElementRef;
fromEvent(this.input.nativeElement, 'keyup')
.pipe(
filter((val: any) => val.target.value.length > 3),
debounceTime(500),
distinctUntilChanged(),
switchMap((val: any) => this.userService.get(val.target.value))
)
.subscribe(data => {
console.log(data);
});
Although the search function is triggered when something is typed in the input box, the filter I applied to only execute the API call when the input value is greater than 3 does not seem to be working properly.
I am currently stuck on this issue. Any suggestions? Thank you!