In which module should I declare Angular Directive?

Question

I have a Directive:

@Directive({
    selector: '[ICheck]',
})
export class ICheckDirective {

    @Input()
    ICheck: string;

    constructor(element: ElementRef) {
        var $element: any = $(element.nativeElement);

        $element.iCheck({
            checkboxClass: 'icheckbox_md',
            radioClass: 'iradio_md',
            increaseArea: '20%'
        })
    }

}

Where I declare it in app.module

@NgModule({
    declarations: [
        ...
        ICheckDirective,
    ],
    imports: [
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

I got an error in my component RoleListComponent in roles.module

@NgModule({
    imports: [
        RoleListComponent,
        ...
    ],
    declarations: [
        ...
    ]
})
export class RolesModule { }

Error I got

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ICheck' since it isn't a known property of 'input'. (" ][ICheck] />

my routing:

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: DashboardComponent
            },
            {
                path: 'users',
                loadChildren: './user/user.module#UserModule'
            },
            {
                path: 'roles',
                loadChildren: './roles/roles.module#RolesModule'
            },
            {
                path: 'portalpageowners',
                loadChildren: './portalpageowner/portalpageowner.module#PortalPageOwnerModule'
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AdminRoutingModule { }

score 4 · Accepted Answer · answered Aug 25 '18 at 07:13

You need to add into declarations of that module in which you want to use it. In your case into the RoleModule. But if you need to add it into more modules, you need to create a SharedModule, export that directive from it

@NgModule({
   declarations: [ ..., ICheckDirective, ... ],
   exports: [ ..., ICheckDirective, ... ]
})
export class SharedModule { }

and import this module into another modules.

@NgModule({
   imports: [ ..., SharedModule, ... ]
})
export class RoleModule { }

...

@NgModule({
   imports: [ ..., SharedModule, ... ]
})
export class AnotherModule { }

export will make the directive visible to the declarations of those modules which import SharedModule.

In which module should I declare Angular Directive?

1 Answers1