title: Directive not being used
body: <p>I have the following directive</p>
  
  <pre><code>import { Directive, ElementRef, AfterViewChecked, Input, HostListener } from '@angular/core';
  
  @Directive({selector: '[myMatchHeight]'})
  export class MatchHeightDirective {
  
      // class name to match height
      @Input()
      myMatchHeight: any;
  
      constructor(private el: ElementRef) {
          console.log("were inside the directive");
      }
  }
  </code></pre>
  
  <p>In my template I use it here</p>
  
  <pre><code>&lt;div class="row" myMatchHeight="card"&gt;
  &lt;div class="col-lg-6"&gt;
    &lt;div class="card"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-6"&gt;
    &lt;div class="card"&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and I imported it into my app module and added it to my declarations, but nothing is logged to the console. Why?</p>
  
  <p>Import </p>
  
  <pre><code>import {MatchHeightDirective} from './match-height.directive';
  </code></pre>
  
  <p>Declarations</p>
  
  <pre><code>declarations: [
  AppComponent,
  FullLayoutComponent,
  SimpleLayoutComponent,
  NAV_DROPDOWN_DIRECTIVES,
  BreadcrumbsComponent,
  MatchHeightDirective,
  SIDEBAR_TOGGLE_DIRECTIVES,
  AsideToggleDirective,
  </code></pre>
  
  <p>],</p>