title: Import Directive into Component in Angular
body: <p>Is it possible to import <code>Directive</code> into <code>Component</code>? I want to avoid importing into <code>ngModule.declarations</code>.</p>
  
  <p>I am following <a href="https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/data-binding/automatic-operations/#toc-custom-directives" rel="noreferrer">CustomDirective for Telerik Angular Grid</a>. It is suggested to populate grid with customDirective, but I will need this directive in only one component, so I want to avoid importing in ngModule, to avoid name collisions.</p>
  
  <p><strong>Edited:</strong><br>
  I tried with <code>viewProviders</code> but it does not work. <a href="https://plnkr.co/edit/dYx3aFxEATDJkAjrzEXk?p=preview" rel="noreferrer">Here</a> is plunkr that works (directive imported in ngModule):</p>
  
  <pre><code>@NgModule({
    imports: [ BrowserModule ],
    declarations: [
      AppComponent,
      HighlightDirective
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>and <a href="https://plnkr.co/edit/lpE2Eq7HVtjRHOxgBriw?p=preview" rel="noreferrer">here</a> is plunkr which doesn't work. (directive imported in Component):</p>
  
  <pre><code>@NgModule({
    imports: [ BrowserModule ],
    declarations: [
      AppComponent,
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  
  @Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    viewProviders: [HighlightDirective]
  })
  export class AppComponent {
    color: string;
  }
  </code></pre>