title: Angular2 Directive to modify click handling
body: <p>I am trying to write a Angular2 attribute directive to modify the behaviour of certain elements. More specifically I want to apply an attribute to certain elements that have click handlers and prevent the bound function to be executed under certain conditions.</p>
  
  <p>So now I have an element e.g.: </p>
  
  <pre><code>&lt;button (click)="onClick(param1, param2)"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>onClick is a function declared on the component that hosts the button element doing some work.</p>
  
  <p>What I would like to do is write something like:</p>
  
  <pre><code>&lt;button (click)="onClick(param1, param2)" online-only&gt;&lt;/button&gt;
  </code></pre>
  
  <p>and have a directive like:</p>
  
  <pre><code>@Directive({
    selector: '[online-only]',
  })
  export class OnlineOnlyDirective {
    @HostListener('click', ['$event']) 
    onClick(e) {
      if(someCondition){
        e.preventDefault();
        e.stopPropagation();
      }
    }
  }
  </code></pre>
  
  <p>But click handler is executed first, thus not giving my directive the opportunity to stop its execution.</p>
  
  <p>A second approach I thought about was replacing (click) with my own handler e.g.( [onlineClick]="onClick" ) and execute the passed function when the directive thinks fit, but this way I cannot pass params to onClick function and is a bit weirder to look at.</p>
  
  <p>Do you have any thoughts on doing something like that?</p>