Vfrdtyky

In my template I have field and two buttons:

<div class="btn-plus" (click)="add(1)"> - </div>

<div class="txt"> {{ myValue }} </div>

<div class="btn-minus" (click)="add(-1)"> + </div>

In my component .ts file I have:

add(num) {

    this.myValue +=num;

    this.update(); // async function which will send PUT request

}

The this.update() function put myValue to proper field in big JSON object and send it to server.

Problem: When user click 10x in short period of time on button plus/minus, then request will be send 10 times. But I wanna to send request only once - 0.5 sec after last click. How to do it?

Use the takeUntil operator :

export class AppComponent  {

  name = 'Angular';



  calls = new Subject();



  service = {

    getData: () => of({ id: 1 }).pipe(delay(500)),

  };



  click() {

    this.calls.next(true);

    this.service.getData().pipe(

      takeUntil(this.calls),

    ).subscribe(res => console.log(res));

  }

}

Stackblitz (open your console to check the logs)

This is answer partially I found in internet, but I open to better solutions (or improve to below solution(directive)):

In internet I found appDebounceClick directive which helps me in following way:

I remove update from add in .ts file:

add(num) {

    this.myValue +=num;

}

And change template in following way:

<div 

    appDebounceClick 

    (debounceClick)="update()" 

    (click)="add(1)" 

    class="btn-plus"

    > - 

</div>

<div class="txt"> {{ myValue }} </div>

<!-- similar for btn-minus -->

BONUS

Directive appDebounceClick written by Cory Rylan (I put code here in case if link will stop working in future):

import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';

import { Subject } from 'rxjs/Subject';

import { Subscription } from 'rxjs/Subscription';

import { debounceTime } from 'rxjs/operators';



@Directive({

  selector: '[appDebounceClick]'

})

export class DebounceClickDirective implements OnInit, OnDestroy {

  @Input() debounceTime = 500;

  @Output() debounceClick = new EventEmitter();

  private clicks = new Subject();

  private subscription: Subscription;



  constructor() { }



  ngOnInit() {

    this.subscription = this.clicks.pipe(

      debounceTime(this.debounceTime)

    ).subscribe(e => this.debounceClick.emit(e));

  }



  ngOnDestroy() {

    this.subscription.unsubscribe();

  }



  @HostListener('click', ['$event'])

  clickEvent(event) {

    event.preventDefault();

    event.stopPropagation();

    this.clicks.next(event);

  }

}