title: How to prevent double click in Angular?
body: <p>I have a component with <code>click</code>.</p>
  
  <pre><code>&lt;my-box (click)="openModal()"&gt;&lt;/my-box&gt;
  </code></pre>
  
  <p>When I click this element, <code>openModal</code> function will run. 
  And I'd like to give 1000ms throttle time in order to prevent opening multiple modals.</p>
  
  <p>My first approach was using <code>Subject</code> (from rxJs)</p>
  
  <pre><code>//html
  &lt;my-box (click)="someSubject$.next()"&gt;&lt;/my-box&gt;
  //ts
  public someSubject$:Subject&lt;any&gt; = new Subject();
  ...etc subscribe
  </code></pre>
  
  <p>But I feel it's a bit verbose.</p>
  
  <p>Next Approach was using a <code>directive</code>.
  I modified a bit of code that I found by googling.</p>
  
  <pre><code>//ts
  import {Directive, HostListener} from '@angular/core';
  
  @Directive({
      selector: '[noDoubleClick]'
  })
  export class PreventDoubleClickDirective {
  
      constructor() {
      }
  
      @HostListener('click', ['$event'])
      clickEvent(event) {
          event.stopPropagation();    // not working as I expected.
          event.preventDefault();     // not working as I expected.
  
          event.srcElement.setAttribute('disabled', true);    // it won't be working unless the element is input.
          event.srcElement.setAttribute('style', 'pointer-events: none;');   // test if 'pointer-events: none' is working but seems not. 
  
          setTimeout(function () {
              event.srcElement.removeAttribute('disabled');
          }, 500);
      }
  }
  
  //html
  &lt;my-box noDoubleClick (click)="openModal()"&gt;&lt;/my-box&gt;
  </code></pre>
  
  <p>However, whatever I try, always <code>openModal</code> was executed.
  I couldn't find how to stop executing <code>openModal</code> in the directive.</p>
  
  <p>I can just make like</p>
  
  <pre><code>//ts
  //In the openModal method.
  openModal() {
      public isClickable = true
  
      setTimeout(() =&gt; {
          this.newsClickable = true;
      }, 1000);
      ...
  }
  </code></pre>
  
  <p>But for the reusable code, I think using directive is ideal.</p>
  
  <p>How can I make it?</p>