Angular2 Directive to modify click handling
<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>