How to SetTimeout KeyUp in Angular 7

Question

I've searched solution in Google but not found.

Tried 1:

<input type="text" #txtSearch (keyup)="onKeyUp(txtSearch.value)">

And search.component.ts

onKeyUp(val){
    setTimeout(function(){
        console.log(val);
    },500);
}

Tried 2

I'm using similar here How to achieve a debounce service on input keyup event in angular2 with rxjs but in Angular 7 not working.

Finally

I expect keyup delay 0.5s then console.log(value);

Should work. If not, please provide a [mcve] on https://stackblitz.com — , Feb 01 '19 at 08:34
See this: https://stackoverflow.com/questions/50275945/how-to-implement-a-debounce-time-in-keyup-event-in-angular-6/50276294 — Mohammad Hossein Ganjyar, Jul 15 '19 at 15:19

score 6 · Answer 1 · answered Feb 01 '19 at 08:49

For such kind of cases, you can better to use debounceTime from rxJs. Even has much better support with angular. Have a look below with example -

import { Component } from '@angular/core';
import { of, timer, Subject } from 'rxjs';
import { debounce, debounceTime } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  model: string;
  modelChanged: Subject<string> = new Subject<string>();

    constructor() {
        this.modelChanged.pipe(
            debounceTime(500))
            .subscribe(model => {
              console.log(model);
            });
    }

    changed(text: string) {
        this.modelChanged.next(text);
    }
}

<input [ngModel]='model' (ngModelChange)='changed($event)' />

Working Example

How to SetTimeout KeyUp in Angular 7

1 Answers1