How to achieve a debounce service on input keyup event in angular2 with rxjs

by

So the chain is really correct but the problem is that you’re creating an Observable and subscribe to it on every keyup event. That’s why it prints the same value multiple times. There’re simply multiple subscriptions which is not what you want to do.

There’re obviously more ways to do it correctly, for example: 

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" (keyup)='keyUp.next($event)'>
    </div>
  `,
})
export class App implements OnDestroy {

  public keyUp = new Subject<KeyboardEvent>();

  private subscription: Subscription;

  constructor() {
    this.subscription = this.keyUp.pipe(
      map(event => event.target.value),
      debounceTime(1000),
      distinctUntilChanged(),
      mergeMap(search => of(search).pipe(
        delay(500),
      )),
    ).subscribe(console.log);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

See your updated demo: http://plnkr.co/edit/mAMlgycTcvrYf7509DOP

Jan 2019: Updated for RxJS 6

More Related Contents:

  1. Angular 7 go offline?
  2. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  3. How to do the chain sequence in rxjs
  4. Rxjs toPromise() deprecated
  5. Property ‘catch’ does not exist on type ‘Observable’
  6. How to get current value of RxJS Subject or Observable?
  7. How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2
  8. Importing lodash into angular2 + typescript application
  9. BehaviorSubject vs Observable?
  10. How to return value from function which has Observable subscription inside?
  11. angular 2 how to return data from subscribe
  12. Angular4 – No value accessor for form control
  13. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  14. Deep copy an array in Angular 2 + TypeScript
  15. How to call JavaScript functions from Typescript in Angular 5?
  16. ngOnInit not being called when Injectable class is Instantiated
  17. Angular 2 – communication of typescript functions with external js libraries
  18. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  19. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  20. Angular 2 – Chaining http requests
  21. How to check for isBrowser in Angular 4
  22. Unraveling Angular 2 book, Chapter 1, Example 5
  23. What is the difference between Observable and a Subject in rxjs?
  24. What is the difference between BehaviorSubject and Observable?
  25. Return an empty Observable
  26. Scroll to element on click in Angular 4
  27. Storing Objects in localStorage
  28. Subscribe to observable is returning undefined
  29. What is pipe for in RxJS?
  30. How to check empty object in angular 2 template using *ngIf

Leave a Comment