Extending a Attribute Directive
<p>I would like to extend the built-in <code>routerLink</code> directive to create my own directive called <code>customRouterLink</code>.</p>

<p>I have simply created a class that extends <code>RouterLinkWithHref</code>:</p>

<pre><code>@Directive({ 
     selector: 'a[customRouterLink]'
})
export class CustomLinkDirective extends RouterLinkWithHref {

  constructor(router: Router, route: ActivatedRoute, locationStrategy:  LocationStrategy) {
    super(router, route, locationStrategy);
  }

  @Input()
  set customRouterLink(data: any[]|string) {
      console.log("custom directive input", data);
  }

}
</code></pre>

<p>I am attempting to create an instance of this directive:</p>

<pre><code>&lt;a [customRouterLink]="'http://www.google.com'"&gt;custom link&lt;/a&gt;
</code></pre>

<p>Which is causing the following error:</p>

<pre><code>Can't bind to 'customRouterLink' since it isn't a known property of 'a'.
</code></pre>

<p>However, if I remove <code>extends RouterLinkWithHref</code> from the directive definition it works.</p>

<p>Example plunkers:</p>

<ul>
<li><code>CustomLinkDirective extends RouterLinkWithHref</code> - <a href="https://plnkr.co/edit/BmxmD35KzJtwaX3DjwnX?p=preview" rel="nofollow">Shows error above</a></li>
<li><code>CustomLinkDirective</code> not extending <code>RouterLinkWithHref</code> - <a href="https://plnkr.co/edit/4PgtRtTY54YdOgWeP0TI" rel="nofollow">Directive created without error</a></li>
</ul>