call keyup event with delay in angular

Welcome to the Observable's world. Just use Observable to get the desired result. Get the reference of your input in the component and use this code. debounceTime will let the event to trigger at least after 1 second from the previous trigger. It will let you not to fire on every keyup when user types fast.

Observable.fromEvent(yourInput, 'keyup').debounceTime(1000).subscribe(value => /* */)

In the subscribe method you can write your logic. The value is the value of the input.

View template.html

<input type="text" [(ngModel)]="searchedKPI" (keyup)="searchConfigTree()" #something>

component.ts (do not forget implement the AfterViewInit)

     source: any;     @ViewChild("something") something:ElementRef;      ngAfterViewInit(): void {                this.source = fromEvent(this.something.nativeElement, 'keyup');                this.source.pipe(debounceTime(1200)).subscribe(c =>                 {                          list = list.filter(item => item.label.toLocaleLowerCase().includes(this.searchedKPI.toLocaleLowerCase())).slice();                }                );              }

This solution works for me

View Template.html

<input type="text" placeholder="Filter..." class="form-control" [(ngModel)]="filter" (input)="searchChange($event.target.value, true)"><button class="btn btn-primary" type="button" (click)="searchChange(filter, false)"><i class="fa fa-search"></i></button>

Comonent.ts

  filter= '';  private timer: any;  searchChange(filter: string, to = false) {    filter = filter.toLowerCase();    if (to) {      clearTimeout(this.timer);      this.timer = setTimeout(() => {        this.valuesFilter = this.allValues.filter(f => f.field.toLowerCase().includes(filter));      }, 400);    } else {      this.valuesFilter = this.allValues.filter(f => f.field.toLowerCase().includes(filter));    }  }