angular - Using Directives on Component element -

i'm trying workout if possible.

i trying place directive on component element

wrappercomponent.ts

@component({     selector: 'app-wrapper',     template: '<div><app-component draggable></app-component></div>' }) export class wrappercomponent implements oninit {      constructor() {      }      ngoninit() {       //code here     } } 

appcomponent.ts

@component({     selector: 'app-component',     template: '<div>sample text</div>' }) export class appcomponent implements oninit {      constructor() {      }      ngoninit() {       //code here     } } 

draggabledirective.ts

@directive({     selector: '[draggable]', }) export class draggabledirective implements oninit {      constructor(private _element: elementref, renderer: renderer) {      }      ngoninit() {       //code here      } } 

but when error

zone.js:355 unhandled promise rejection: template parse errors: can't bind 'draggable' since isn't known property of 'app-component'. 1. if 'app-component' angular component , has 'draggable' input, verify part of module. 2. if 'app-component' web component add "custom_elements_schema" '@ngmodule.schemas' of component suppress message.  ("<div>     <app-component [arddraggable]="true"></app-component> </div>") 

is there missing make component recognize attribute directive instead of input component.

change selector in appcomponent , make sure have added wrappercomponent, appcomponent , draggabledirective ngmodule declaration :

@component({   selector: 'app-component',   template: '<div>sample text</div>' }) 

//appmodule:

@ngmodule({   imports:      [ browsermodule ],   declarations: [ appcomponent, wrappercomponent, draggabledirective ],   bootstrap:    [ wrappercomponent ] })