adding debouncetime in Input element event, angular10

Question

I am using a simple input in angular.

           <ng-template #searchinput>
              <mat-form-field class="w-100" floatLabel="never">
                <input matInput placeholder="Search" [id]="'search_'+col.columnDef" (input)="searchChange($event.target.value, col.columnDef)">
              </mat-form-field>
            </ng-template>

i want to add debounceTime in the event.

searchChange(event, colName) {
    console.log(event, colName);
    event.pipe(
      debounceTime(300), 
      distinctUntilChanged())
      .subscribe(value => console.log(value)
    );    
  }

But this is not working ERROR TypeError: event.pipe is not a function. Need some help.

What does the console say? What is the error?

Marek W
– Marek W

2020-10-23 05:14:32 +00:00
Commented Oct 23, 2020 at 5:14 — Marek W
– Marek W, Commented Oct 23, 2020 at 5:14
added the error, event is basically the text not observable

raju
– raju

2020-10-23 05:54:51 +00:00
Commented Oct 23, 2020 at 5:54 — raju
– raju, Commented Oct 23, 2020 at 5:54
Approving the right answer would be appreciated :)

Marek W
– Marek W

2020-10-27 13:47:23 +00:00
Commented Oct 27, 2020 at 13:47 — Marek W
– Marek W, Commented Oct 27, 2020 at 13:47

Marek W · Accepted Answer · 2020-10-23 06:10:06Z

1

Your event is actually the value from your input field. If you want to add debounceTime, you have to do the following;

private value$ = new Subject<string>();

ngOnInit() {
  this.input$
    .pipe(
      debounceTime(300),
      distinctUntilChanged()
    )
    .subscribe((input: string) => {
      console.log(input);
    }
}

searchChange(input, colName) {
  this.input$.next(input);
}

answered Oct 23, 2020 at 6:10

Marek W

7295 silver badges14 bronze badges

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

Comments

Eliseo · Accepted Answer · 2020-10-23 06:33:52Z

1

The correct answer is the Marek W's one. Another aproach is using a FormControl, and subcribe to valueChanges just

control=new FormControl();
ngOnInit()
{
 this.control.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged()
    )
    .subscribe((input: string) => {
      console.log(input);
    }
}

And

<input [formControl]="control">

answered Oct 23, 2020 at 6:33

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

1 Comment

Mrk Sef Over a year ago

Or use @viewChild on the input and then fromEvent() to create a stream directly from the DOM event. FormControl gives you a lot of extras though, so I like this answer best. I also think binding a FormControl with the directive looks cleaner and is easier to understand.

Collectives™ on Stack Overflow

adding debouncetime in Input element event, angular10

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related