Angular 2: Debones (ngModelChange)?

formcontrol

<input type="text" placeholder="Enter a value" name="foo" [(ngModel)]="txtQuery" (ngModelChange)="onFieldChange($event)">

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 => {

 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 [ngModel]="someValue" (ngModelChangeDebounced)="someValue = $event">

[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) => this.ngModelChangeDebounced.emit(value));

 }

}

debounceTime

Subject