Edited: The proposed solution is the right one, I had to mention that SharedModule has to be imported into the parent component of the child component which uses DropDownDirective in order to work.
I'm working on Angular 4 application and I wanted to optimize its structure using SharedModule which containes DirectivesModule. I have a component X which uses one of the directives from DirectivesModule by importing SharedModule in it, like so:
app/X.component.ts
import { SharedModule } from '../shared/shared.module';
And in the view of the component X I'm using the directive like so:
<div class="col-xs-5 dropdown" appDropDown>
The structure of the app is following:
root
-- X.component.ts
-- shared
-- shared.module.ts
-- directives
-- directives.module.ts
-- dropdown.directive.ts
What am I doing, is importing DirectivesModule into SharedModule, like so:
import { CommonModule } from '@angular/common';
import { DirectivesModule } from './directives/directives.module';
@NgModule({
imports: [
CommonModule
],
declarations: [
],
exports: [
DirectivesModule
]
})
export class SharedModule { }
DirectivesModule imports and exports DropDownDirective like so:
import { DropDownDirective } from './dropdown.directive';
.....
exports: [
DropDownDirective,
]
And, then SharedModule is imported into X.component by the aforenamed way.
The problem is that the directive doesn't work. It should apply a class 'open' to the element but doesn't do it.
I am not sure if this is the correct way to implement the structure, so suggested changes are welcome and any help would be greatly appreciated.
