Search code examples
javascriptangularangular-directiveangular-components

How do I make an Angular directive usable only by one component?

The only way I know of being able to use my directive is by exporting it in the module.

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [BreadcrumbsComponent, IsRightDirective],
  exports: [BreadcrumbsComponent, IsRightDirective]
})
export class BreadcrumbsModule { }

My BreadcrumbsModule is imported by my AppModule

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

Now when I use my breadcrumbs component, which I named the selector bulma-breadcrumbs, and add the attribute, is-right, it works as expected. However if I add it to another tag, like an h1, the directive also affects it.

I'm trying to get the directive to only apply on the BreadcrumbsComponent.

Solution

  • Before Angular 2 RC5, a hierarchy of directives/components was transparent, because components had directives property that defined components/directives that affected only this component and its children.

    After the introduction of NgModule, this feature remained intact but became less evident. As explained in this answer, it's possible with proper hierarchy of modules.

    Most times module declarations and exports are same, this allows to use module directives, components and pipes globally within the application.

    If a unit isn't exported from a module, it's available only locally, to other units within same module.

    This

    @NgModule({
  imports: [
    CommonModule
  ],
  declarations: [BreadcrumbsComponent, IsRightDirective],
  exports: [BreadcrumbsComponent]
})
export class BreadcrumbsModule { }

    will prevent is-right attribute directive from being compiled anywhere but this module declarations (i.e. BreadcrumbsComponent).

    Alternatively, directive selector can be restricted to bulma-breadcrumbs[is-right]. The result will be same, but this won't prevent the directive from being used in other modules that have their local bulma-breadcrumbs component.