1import {Component} from '@angular/core';
2import {FormControl} from '@angular/forms';
3import {Observable} from 'rxjs/Observable';
4import 'rxjs/add/operator/debounceTime';
5import 'rxjs/add/operator/throttleTime';
6import 'rxjs/add/observable/fromEvent';
7
8@Component({
9 selector: 'my-app',
10 template: `<input type=text [value]="firstName" [formControl]="firstNameControl">
11 <br>{{firstName}}`
12})
13export class AppComponent {
14 firstName = 'Name';
15 firstNameControl = new FormControl();
16 formCtrlSub: Subscription;
17 resizeSub: Subscription;
18 ngOnInit() {
19 // debounce keystroke events
20 this.formCtrlSub = this.firstNameControl.valueChanges
21 .debounceTime(1000)
22 .subscribe(newValue => this.firstName = newValue);
23 // throttle resize events
24 this.resizeSub = Observable.fromEvent(window, 'resize')
25 .throttleTime(200)
26 .subscribe(e => {
27 console.log('resize event', e);
28 this.firstName += '*'; // change something to show it worked
29 });
30 }
31 ngDoCheck() { console.log('change detection'); }
32 ngOnDestroy() {
33 this.formCtrlSub.unsubscribe();
34 this.resizeSub .unsubscribe();
35 }
36}