How to make directives and components available globally

by

update >=RC.5

You have to import a module in whatever module you want to use components, directives or pipes of the imported module. There is no way around it.

What you can do is to create a module that exports several other modules (for instance, the BrowserModule that exports CommonModule.

@NgModule({
  declarations: [CoolComponent, CoolDirective, CoolPipe],
  imports: [MySharedModule1, MySharedModule2],
  exports: [MySharedModule1, MySharedModule2, CoolComponent, CoolDirective, CoolPipe],
})
export class AllInOneModule {}

@NgModule({
  imports: [AllInOneModule]
})
class MyModule {}

This way you make everything exported by AllInOneModule available to MyModule.

See also https://angular.io/docs/ts/latest/guide/ngmodule.html

update <=RC.5

bootstrap(AppComponent, [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})]);

See comments below – even though per style guide providers in the root component should be favored over boostrap() this doesn’t work:

original

On the root component add

@Component({
  selector: 'my-app',
  providers: [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})],
  templat: `...`
})
export component AppComponent {
}

@Component(), @Directive(), @Pipe() already include @Injectable(). No need to add it there as well.

More Related Contents:

  1. NgFor doesn’t update data with Pipe in Angular2
  2. Angular: Cannot find a differ supporting object ‘[object Object]’
  3. How to dynamically add a directive?
  4. Angular 2 Scroll to top on Route Change
  5. Difference between [ngClass] vs [class] binding
  6. Apply a directive conditionally
  7. When to use square brackets [ ] in directives @Inputs and when not?
  8. Angular 2 Read More Directive
  9. Using a directive to add class to host element [duplicate]
  10. How to pass object from one component to another in Angular 2?
  11. How to import component into another root component in Angular 2
  12. How to detect scroll to bottom of html element
  13. Angular2 Styles in a Directive
  14. What is the difference between component and directive?
  15. Angular exception: Can’t bind to ‘ngForIn’ since it isn’t a known native property
  16. Get reference to a directive used in a component
  17. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  18. How to use `trackBy` with `ngFor`
  19. How to make an angular module to ignore http interceptor added in a core module
  20. How to share data between components using a service properly?
  21. Angular 2 Form “Cannot find control with path”
  22. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  23. How do I get the absolute path of the current page in Angular 2?
  24. Behaviour subject initial value null?
  25. How to reset form validation on submission of the form in ANGULAR 2
  26. Angular 4 Lazy loading with named router-outlet not working
  27. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  28. Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)
  29. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  30. Custom Exception Handler in Angular2

Leave a Comment