Delay in input change Angular

Question

Hello I have an input in my application which fires on every stroke but I want some delay so for eg. trigger my search function after 1 sec so that it doesn't send multiple requests

My Html Code

<input id="musicsearch"
  (input)="onSearchChange($event.target.value)"  
  ng-model-options="{debounce:1000}" 
  class="form-control mr-sm-2"style="width: 100%;"
  type="text"placeholder="Search">

component.ts (which handles change)

 onSearchChange(searchValue : string ) {    
    this.router.navigate(['/search', searchValue]);      
  }

I am new to angular I can't find solution for my problem, I want to trigger this when user stop typing in input

maybe use (blur) instead of (input)?

Rick
– Rick

2020-07-22 19:42:02 +00:00
Commented Jul 22, 2020 at 19:42 — Rick
– Rick, Commented Jul 22, 2020 at 19:42

Akshay Rajput · Accepted Answer · 2018-12-12 12:30:33Z

36

  private modelChanged: Subject<string> = new Subject<string>();
  private subscription: Subscription;
  debounceTime = 500;

  ngOnInit(): void {
    this.subscription = this.modelChanged
      .pipe(
        debounceTime(this.debounceTime),
      )
      .subscribe(() => {
        this.functionToBeCalled();
      });
  }
  functionToBeCalled() {
    console.log('Called After 500ms');
  }

  inputChanged() {
    this.modelChanged.next("Akshay Is Awesome")
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

html file <input type="text" (keydown)="inputChanged()">

Try This Thanks me later :)

edited Dec 12, 2018 at 12:30

answered Dec 12, 2018 at 12:11

Akshay Rajput

2,0781 gold badge15 silver badges22 bronze badges

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

7 Comments

Sunil Meena Over a year ago

@Akashay Cannot find name 'Subject'. , Cannot find name 'Subscription'. and Cannot find name 'debounceTime'. Did you mean the instance member 'this.debounceTime'?

Maniraj Murugan Over a year ago

@SunilMeena,You need to import those.. If you look at the link i provided in my answer comment you will come to know..

Akshay Rajput Over a year ago

import { Subject } from 'rxjs/Subject'; import { Subscription } from 'rxjs/Subscription'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; Hope This helps :)

Nate Over a year ago

I've found if you use the (keyup) event you'll get all characters. (keydown) was leaving off the last character for me.

Akshay Rajput Over a year ago

Hi @Nate the event has been added just for reference purpose, we can use change, input, keydown or another valid event :)

|

Arun Kumar · Accepted Answer · 2022-09-15 11:53:00Z

9

On Html file

<input [(ngModel)]="searchTxt" type="text" (keyup)="triggerSearch()">

On ts file

searchTxt:string = '';
timeout = null;

triggerSearch() {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.onSearchChange(this.searchTxt);
    }, 1000);
  }

edited Sep 15, 2022 at 11:53

answered Sep 15, 2022 at 11:01

Arun Kumar

2113 silver badges4 bronze badges

Comments

Malte Bruweleit · Accepted Answer · 2024-08-26 17:07:05Z

0

Just came across this issue and tried to find an improved solution. Came up with the following using the ReactiveForms capabilities and RxJs (debounceTime).

Bind the input with the formControl attribute.

<input [formControl]="control">

Put it together in the typescript component.

control = new FormControl();

constructor() {
  this.control.valueChanges
    .pipe(debounceTime(500))
    .subscribe((value: string) => {
      // do something with the value
    });
}

answered Aug 26, 2024 at 17:07

Malte Bruweleit

11 bronze badge

Collectives™ on Stack Overflow

Delay in input change Angular

3 Answers 3

7 Comments

On Html file

On ts file

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

On Html file

On ts file

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related