title: Prevent href from onclick within component
body: <p>Within my project I'm trying to create a custom anchor component to centralize styling (icons and such). Basically, a wrapper for <code>&lt;a href&gt;</code>.</p>
  
  <p>In some situations I need to bind the <code>(click)</code> event for different or additional behaviour. By returning <code>false</code> in the click event of anchors, you can prevent the browser from following the href. This means my click will fire on a normal click or tap, but the href will be followed when using the middle mouse button or <kbd>ctrl</kbd>+<kbd>click</kbd>.</p>
  
  <p>I have no clue how to accomplish this when the anchor resides <strong>inside a component</strong>.</p>
  
  <p>I would have to expose the click event outwards using an <code>@Output()</code> event emitter, but this doesn't allow you to return a value (<code>false</code>).<br>
  The other option would be to bind the function as an <code>@Input()</code> property, but then passing arguments to the call becomes troublesome. Binding would be <code>[clicked]="open"</code> rather than <code>(clicked)="open($event, args)"</code>, leaving no direct room for arguments.</p>
  
  <p>What I'm trying to accomplish would look something like the following:</p>
  
  <p><strong>SomeGridComponent</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- let-row="row" --&gt;
  &lt;app-href [href]="openHref(row)" (click)="open($event, row)"&gt;&lt;/app-button&gt;
  </code></pre>
  
  <pre><code>open(evt: MouseEvent, row: IRowData): boolean {
    if (/* some condition */ true) {
      // do stuff
      return false;
    }
  }
  </code></pre>
  
  <p><strong>HrefComponent</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a [href]="href" (click)="hrefClicked($event)"&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/a&gt;
  </code></pre>
  
  <pre><code>@Output() click = new EventEmitter&lt;MouseEvent&gt;();
  
  hrefClicked(data: MouseEvent): void {
    // return this.click.emit(data);
    this.click.emit(data);
  }
  </code></pre>
  
  <p>Any suggestions are appreciated!</p>