title: href directive does not work in Angular
body: <p>I have set the following directive to catch clicks on all <code>href</code>s :</p>
  
  <pre><code>    import {Directive, ElementRef, Input} from '@angular/core';
  
  @Directive({
      selector : '[href]',
      host : {
          '(click)' : 'doNothing($event)'
      }
  })
  export class HrefTelDirective {
      @Input() href: string;
  
      constructor(el: ElementRef) {
          console.log('href loaded');
          console.log(el);
      }
  
      doNothing(event) {
          // if(this.href.length === 0 || this.href === '#') {
          //     event.preventDefault();
          // }
          console.log('href clicked');
      }
  }
  </code></pre>
  
  <p>I load the directive on different modules, including core, shared, etc. but it is never called. When I change the selector to other name like 'myHighlightDirective' it is called. </p>