title: Extending a Attribute Directive
body: <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>