Angular2 Can't bind to DIRECTIVE since it isn't a known property of element
When wrapping a property in brackets []
you're trying to bind to it. So you have to declare it as an @Input
.
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[appContenteditableModel]'
})
export class ContenteditableModelDirective {
@Input()
appContenteditableModel: string;
constructor() { }
}
The important part is, that the member (appContenteditableModel
) needs to be named as the property on the DOM node (and, in this case, the directive selector).
If you're using a shared module to define the directive make sure it is both declared and exported by module it's defined in.
// this is the SHARED module, where you're defining directives to use elsewhere
@NgModule({
imports: [
CommonModule
],
declarations: [NgIfEmptyDirective, SmartImageDirective],
exports: [NgIfEmptyDirective, SmartImageDirective]
})
For me the fix was moving the directive references from root app.module.ts
(the lines for import
, declarations
, and/or exports
) to the more specific module src/subapp/subapp.module.ts
my component belonged to.