title: Not able to access directive using @ContentChild
body: <p>I have a directive as follow:</p>
  
  <pre><code>@Directive({
      selector: '[expTemplate]',
  })
  export class ExpTemplateDirective {
      constructor() { }
  }
  
  @NgModule({
      imports: [],
      exports: [ExpTemplateDirective],
      declarations: [ExpTemplateDirective]
  })
  export class SharedModule { }
  </code></pre>
  
  <p>which I am passing to my <strong>dropdown</strong> component from <strong>header</strong>  as follow</p>
  
  <pre><code>    &lt;dropdown [items]="navItem.subMenu" dropDownType="navMenu xs-hide sm-hide" [theme]="'dropdown-primary'" [placement]="'left'"&gt;
          &lt;a *ngIf="navItem.type !== 'ng2'" href="{{navItem.link}}"&gt;{{navItem.text}}&lt;/a&gt;
          &lt;a *ngIf="navItem.type === 'ng2'" href="{{navItem.link}}"&gt;{{navItem.text}}&lt;/a&gt;
          &lt;template expTemplate let-item&gt;
              &lt;a  href="{{item.link}}"&gt;{{item.text}}&lt;/a&gt;
           &lt;/template&gt;
      &lt;/dropdown&gt;
  </code></pre>
  
  <p>Now I am tring to access that expTemplate directive on my <strong>dropdown</strong> component but I am getting it undefined </p>
  
  <pre><code>@ContentChild(ExpTemplateDirective) templateRef: ExpTemplateDirective;
  </code></pre>
  
  <p>I am not able to understand what I missing here please help me....</p>