title: Using Directives on Component element
body: <p>I'm trying to workout if this is possible.</p>
  
  <p>I am trying to place a directive on a component element</p>
  
  <p><strong>WrapperComponent.ts</strong></p>
  
  <pre><code>@Component({
      selector: 'app-wrapper',
      template: '&lt;div&gt;&lt;app-component draggable&gt;&lt;/app-component&gt;&lt;/div&gt;'
  })
  export class WrapperComponent implements OnInit {
  
      constructor() {
  
      }
  
      ngOnInit() {
        //Code Here
      }
  }
  </code></pre>
  
  <p><strong>AppComponent.ts</strong></p>
  
  <pre><code>@Component({
      selector: 'app-component',
      template: '&lt;div&gt;Sample Text&lt;/div&gt;'
  })
  export class AppComponent implements OnInit {
  
      constructor() {
  
      }
  
      ngOnInit() {
        //Code Here
      }
  }
  </code></pre>
  
  <p><strong>DraggableDirective.ts</strong></p>
  
  <pre><code>@directive({
      selector: '[draggable]',
  })
  export class DraggableDirective implements OnInit {
  
      constructor(private _element: ElementRef, renderer: Renderer) {
  
      }
  
      ngOnInit() {
        //Code Here
  
      }
  }
  </code></pre>
  
  <p>But when i do this I get this error</p>
  
  <pre><code>zone.js:355 Unhandled Promise rejection: Template parse errors:
  Can't bind to 'Draggable' since it isn't a known property of 'app-component'.
  1. If 'app-component' is an Angular component and it has 'draggable' input, then verify that it is part of this module.
  2. If 'app-component' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("&lt;div&gt;
      &lt;app-component [ardDraggable]="true"&gt;&lt;/app-component&gt;
  &lt;/div&gt;")
  </code></pre>
  
  <p>Is there something I am missing to make the component recognize the attribute as a directive instead of an input for the component.</p>