How to use RxJS operator debounceTime with ngModel on an input field

Question

I'm making a search field. Before making the API call I want to wait for 2 seconds after the user has finished typing. Here is my code:

HTML:

<input type="text" pInputText (input)="onInput()" [(ngModel)]="value1" placeholder="Search">

TS:

searchTerm : Subscription;
onInput() {
    this.searchTerm = from(this.value1);
    this.searchTerm
      .pipe(
        map((event: any) => this.value1),
        debounceTime(2000),
        distinctUntilChanged()
      )
      .subscribe((res: any) => {
        console.log(res);
      });
  }

My code is not waiting for 2 secs. The console log is happening immediately. Please correct my mistake.

Mr. Stash · Accepted Answer · 2022-11-21 10:25:09Z

1

I think using a subject will be a better way to achieve what you want

searchTerm: Subject<any> = new Subject();

ngOnInit(){
  this.searchTerm
    .pipe(
      map((event: any) => this.value1),
      debounceTime(2000),
      distinctUntilChanged()
    )
    .subscribe((res: any) => {
      console.log(res);
    });
}

onInput() {
  this.searchTerm.next(this.value1); 
}

answered Nov 21, 2022 at 10:25

Mr. Stash

3,2284 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ForestG Over a year ago

This is the answer. OP you might wanna check this out stackoverflow.com/a/54162061/3486691 for more explanation - you are recreating your obs. chain so there is nothing to debounce every time you cann your function.

Collectives™ on Stack Overflow

How to use RxJS operator debounceTime with ngModel on an input field

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related