/Javascript/AngularJS/Angular add debounce time before putting valu in subject next

Angular add debounce time before putting valu in subject next

import {Component}   from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable}  from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';

@Component({
  selector: 'my-app',
  template: `<input type=text [value]="firstName" [formControl]="firstNameControl">
    <br>{{firstName}}`
})
export class AppComponent {
  firstName        = 'Name';
  firstNameControl = new FormControl();
  formCtrlSub: Subscription;
  resizeSub:   Subscription;
  ngOnInit() {
    // debounce keystroke events
    this.formCtrlSub = this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
    // throttle resize events
    this.resizeSub = Observable.fromEvent(window, 'resize')
      .throttleTime(200)
      .subscribe(e => {
        console.log('resize event', e);
        this.firstName += '*';  // change something to show it worked
      });
  }
  ngDoCheck() { console.log('change detection'); }
  ngOnDestroy() {
    this.formCtrlSub.unsubscribe();
    this.resizeSub  .unsubscribe();
  }
}

Source: stackoverflow.com

Similar codes

0 vote188 views1 answer
Open bytes in new tab angular
Javascript AngularJS
0 vote204 views1 answer
Angular format phone number while typing
Javascript AngularJS
0 vote145 views2 answers
Font awesome npm angular
Javascript AngularJS
0 vote294 views1 answer
How to redirect from login page to other page if user is already logged in in angular using jwt
Javascript AngularJS
3 votes185 views1 answer
Data binding on checkbox angular
Javascript AngularJS
10 votes216 views5 answers
Angularjs foreach
Javascript AngularJS
0 vote192 views1 answer
How to write a test case for dropdown selection change in angular 9
Javascript AngularJS
1 vote201 views2 answers
What is auth guard in angular
Javascript AngularJS
35 votes375 views6 answers
Angular router
Javascript AngularJS
0 vote227 views2 answers
This version of CLI is only compatible with Angular versions 0.0.0 || ^9.0.0-beta || >=9.0.0 <10.0.0, but Angular version 10.0.14 was found instead.
Javascript AngularJS