angular add debounce time before putting valu in subject next

Solutions on MaxInterview for angular add debounce time before putting valu in subject next by the best coders in the world

showing results for - "angular add debounce time before putting valu in subject next"
Oskar
17 Jul 2016
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}