How to declare a directive globally for all modules?

According @CrazyMac’s comment, a good way would be to create a DirectivesModule. Inside this module you can declare and import all your directives then you will be able to import this module anywhere you want.

app/modules/directives/directives.module.ts

import { NgModule } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  imports: [],
  declarations: [HighlightDirective],
  exports: [HighlightDirective]
})
export class DirectivesModule { }

app/modules/directives/highLight.directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor="yellow";
  }
}

app/modules/otherModule/other-module.module.ts

import { DirectivesModule } from '../directives/directives.module';

@NgModule({
  imports: [
    DirectivesModule
  ],
  declarations: []
})
export class OtherModule { }

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)