This answer was discovered partially on the internet, but I am open to exploring alternative solutions or enhancements to the existing solution (directive):

During my online search, I came across a appDebounceClick directive that aided me in the following manner:

I eliminated update and replaced it with add in the .ts file:

add(num) {
    this.myValue += num;
}

I then modified the template as follows:

<div 
    appDebounceClick 
    (debounceClick)="update()" 
    (click)="add(1)" 
    class="btn-plus"
    > - 
</div>
<div class="txt"> {{ myValue }} </div>
<!-- similar for btn-minus -->

BONUS

The appDebounceClick directive was created by Cory Rylan. Here is the code snippet (in case the link becomes inaccessible in the 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);
  }
}

After experimenting with various solutions, I ultimately opted for a streamlined version of the DebounceClickDirective provided earlier. Since the debounceTime operator lacked support for leading/trailing options, I turned to utilizing the power of lodash. This adjustment effectively removed the delay between clicking and triggering an action, particularly useful in scenarios where swift responsiveness is crucial.

The implementation was straightforward, simply incorporating it as follows:

<button (debounceClick)="openDialog()">

import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
import { debounce } from 'lodash';

@Directive({
  selector: 'button',
})
export class DebounceClickDirective {
  @Output() debounceClick = new EventEmitter();

  @HostListener('click', ['$event'])
  debouncedClick = debounce(
    (event: Event) => {
      this.debounceClick.emit(event);
    },
    500,
    { leading: true, trailing: false },
  );
}

A utility function that helps improve performance --

export const debounced = (callback, delay) => {
  const db = new Subject();
  const sub = db.pipe(debounceTime(delay)).subscribe(callback);
  const func = value => db.next(value);

  func.unsubscribe = () => sub.unsubscribe();

  return func;
};

For instance, it can be implemented like this:

import { Component, OnInit } from '@angular/core';
import { debounced } from 'src/helpers';

@Component({
  selector: 'app-example',
  // Click triggers `debouncedClick` instead of `myClick` directly
  template: '<button (click)="debouncedClick($event)">Click This</button>'
})
export class Example implements OnDestroy {
  debouncedClick; // Subject.next function

  constructor() {
    // Assigning in the constructor or ngOnInit for proper resolution of `this`
    this.debouncedClick = debounced($event => this.myClick($event), 800);
  }

  // Executes after the debounce delay (800ms from last call)
  myClick($event) {
    console.log($event);
  }

  ngOnDestroy() {
    // Keep things clean!
    this.debouncedFunc.unsubscribe();
  }
}

You can also reverse the usage by calling 'myClick' on click and letting the debounced callback handle the desired action. It's up to personal preference.

I personally find this useful for handling (keyup) events too.

Not entirely certain if the unsubscribe is necessary - opted for it as a quick fix rather than delving into memory leak investigation :)

If you prefer not to use an rxjs observable, you can achieve the same functionality using a setTimeout. Below is a sample implementation that ensures memory leak cleanup on ngOnDestroy:

@Component({
  selector: "app-my",
  templateUrl: "./my.component.html",
  styleUrls: ["./my.component.sass"],
})
export class MyComponent implements OnDestroy {
  timeoutRef: ReturnType<typeof setTimeout>;

  clickCallback() {
    clearTimeout(this.timeoutRef);
    this.timeoutRef  = setTimeout(()=> {
      console.log('finally clicked!')
    }, 500);
  }

  ngOnDestroy(): void {
    clearTimeout(this.timeoutRef);
  }
} 

Edit: timeoutRef TypeScript definition has been updated based on feedback from @lord-midi in the comments section.

Is it possible to trigger the onClick event only once, without waiting for subsequent clicks? Or is there a way to ignore multiple click events?

Check out the solution provided by Ondrej Polesny on FreeCodeCamp's website. Special thanks to Cory Rylan for his detailed explanation of Debouncer.

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

@Directive({
  selector: '[appDebounceClick]'
})

export class DebounceClickDirective {

  @Input() debounceTime: number = 800;
  @Output() debounceClick: EventEmitter<any> = new EventEmitter();

  private onClickDebounce = this.debounce_leading(
    (e) => this.debounceClick.emit(e), this.debounceTime
  );

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.onClickDebounce(event);
  }

  private debounce_leading(func: any, timeout: number) {
    let timer;
    return (...args) => {
      if (!timer) {
        func.apply(this, args);
      }
      clearTimeout(timer);
      timer = setTimeout(() => {
        timer = undefined;
      }, timeout);
    };
  };

}

An easier way to approach this is by utilizing a custom subject that triggers on click events and leveraging the built-in functionality of RxJS with debounceTime. See it in action (check the console logs): Stackblitz

// set up these variables
clicker = new Subject();
clicker$ = this.clicker.asObservable();

//Include this inside ngOnInit(), adjust the debounce time as needed
this.clicker$.pipe(debounceTime(200)).subscribe(() => {
     console.log('Requesting Data ...');
     this.service.getData().subscribe((d) => console.log(d));
});

// Call this in your button's click function:
this.clicker.next(true);