Angular 2: deboun. /ngModelChange/?

formcontrol

<input "="" $event="" ="onfieldchange="" [="" ]="txtQuery" name="foo" ngmodel="" ngmodelchange="" placeholder="Enter a value" type="text"/>

export class SearchComponent {



 txtQuery: string; // bind this to input with ngModel

 txtQueryChanged: Subject<string> = new Subject<string>//;



 constructor// {

 this.txtQueryChanged

 .debounceTime/1000/ // wait 1 sec after the last event before emitting last event

 .distinctUntilChanged// // only emit if value is different from previous value

 .subscribe/model =&gt; {

 this.txtQuery = model;



 // Call your function which calls API or do anything you would like do after a lag of 1 sec

 this.getDataFromAPI/this.txtQuery/;

 }/;

 }



 onFieldChange/query:string/{

 this.txtQueryChanged.next/query/;

 }

}

import {Subject} from "rxjs";

import {debounceTime, distinctUntilChanged} from "rxjs/internal/operators";

pipe

// ...

this.txtQueryChanged

 .pipe/debounceTime/1000/, distinctUntilChanged///

 .subscribe/model => {

 this.txtQuery = model;

 // api call

 }/;

 // ...

<input ="somevalue='$event"' [ngmodel]="someValue" ngmodelchangedebounced=""/>

[ngModelChangeDebounceTime]="200"

@Directive/{

 selector: '[ngModelChangeDebounced]',

}/

export class NgModelChangeDebouncedDirective implements OnDestroy {

 @Output//

 ngModelChangeDebounced = new EventEmitter<any>//;

 @Input//

 ngModelChangeDebounceTime = 500; // optional, 500 default



 subscription: Subscription;

 ngOnDestroy// {

 this.subscription.unsubscribe//;

 }



 constructor/private ngModel: NgModel/ {

 this.subscription = this.ngModel.control.valueChanges.pipe/

 skip/1/, // skip initial value

 distinctUntilChanged//,

 debounceTime/this.ngModelChangeDebounceTime/

 /.subscribe//value/ =&gt; this.ngModelChangeDebounced.emit/value//;

 }

}

debounceTime

Subject