How to Effectively Manage Input Events in Angular 2 Using RxJS?

Managing Input Events in Angular 2

In AngularJS, developers could utilize the ng-model-options directive to debounce input model updates. In Angular 2 , a similar functionality is available through the use of RxJS operators.

Debouncing with RxJS

To debounce a model in Angular 2 , leverage the debounceTime() operator on the form control's valueChanges observable. This operator delays subsequent value emissions until the specified time elapses after the last event.

<br>import { debounceTime } from 'rxjs/operators';</p>
<p>formCtrlSub = this.firstNameControl.valueChanges</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

Copy after login

Throttling Events

You can also throttle events, such as resize events, to prevent excessive updates. The throttleTime() operator ensures that only one value is emitted within the specified time window.

<br>import { throttleTime } from 'rxjs/operators';</p>
<p>resizeSub = Observable.fromEvent(window, 'resize')</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pipe(
    throttleTime(200)
)
.subscribe(e => {
    console.log('resize event', e);
    this.firstName += '*';  // change something to show it worked
});

Copy after login