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}