title: How can I create a HostListener within a directive for nativescript?
body: <p>Right now I'm trying to create a directive to add to all my buttons where the button get's disabled when it gets tapped. I can create this by creating a tap event on all my buttons individually in each component but that's inefficient code use. I created a directive on angular to disable the buttons, however, it does not translate over to Nativescript. This is what I did:</p>
  <pre><code>  selector: '[appPreventDoubleClick]',
  })
  export class PreventDoubleClickDirective {
  
    constructor(private elementRef: ElementRef) { }
  
    @HostListener('click') clickEvent() {
      this.elementRef.nativeElement.setAttribute('disabled', true);
      setTimeout(() =&gt; {
        this.elementRef.nativeElement.removeAttribute('disabled');
      }, 1000);
    }
  </code></pre>
  <p>Then on each html button I add the directive:
  <code>appPreventDoubleClick</code></p>
  <p>Doing the same on Nativescript doesn't work, as adding a directive without a container and a template makes the buttons disappear. When I add those, the buttons return, however, I'm unsure as to where to place the Host listener, or if I should even be using host listener.</p>
  <p>The Nativescript documentation shows that an event listener should be added directly to the button object within the component, but I'm not sure how that translates to a directive:
  <a href="https://docs.nativescript.org/core-concepts/events" rel="nofollow noreferrer">https://docs.nativescript.org/core-concepts/events</a></p>
  <p>Any help will be appreciated.</p>