title: Angular 8 Directives from shared module is not working
body: <p>Hello guys! I am trying to make an angular 8 custom directive but it does not work for me, the browser console does not show me any errors but I do not visualize the changes or the console.logs that I have left inside the code, it is as if the directive was never called. Please someone help me! Thanks a lot. I have this, What I'm doing wrong?</p>
  
  <pre><code>// has-permission.directive.ts
  
  import { Directive, ElementRef, Input, OnInit } from '@angular/core';
  
  @Directive({
    selector: '[permission]'
  })
  
  export class HasPermissionDirective {
  
    constructor(private el: ElementRef) { }
  
    @Input() permission: string;
  
    OnInit() {
      console.log('this.permission-&gt;', this.permission)
      console.log('text', this.el.nativeElement.textContent += 'It is working');
      console.log('--------------------------------------------------');
    }
  
  }
  </code></pre>
  
  <pre><code>// shared.module.ts
  
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { HasPermissionDirective } from '../directives/has-permission.directive';  //&lt;-- My directive
  
  @NgModule({
    declarations: [HasPermissionDirective],  //&lt;-- Declaring
    imports: [ ],
    exports: [
      HasPermissionDirective,  //&lt;-- exporting
      CommonModule,
    ]
  })
  export class SharedModule { }
  </code></pre>
  
  <pre><code>//dashboards.module.ts
  
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ComponentsModule } from '../../components/components.module';
  
  import { BsDropdownModule } from 'ngx-bootstrap';
  import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
  import { TooltipModule } from 'ngx-bootstrap/tooltip';
  
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { AlternativeComponent } from './alternative/alternative.component';
  
  import { RouterModule } from '@angular/router';
  import { DashboardsRoutes } from './dashboards.routing';
  import { SharedModule } from '../../shared/shared.module'; //&lt;-- Here
  
  @NgModule({
    declarations: [DashboardComponent, AlternativeComponent],
    imports: [
      CommonModule,
      ComponentsModule,
      BsDropdownModule.forRoot(),
      ProgressbarModule.forRoot(),
      TooltipModule.forRoot(),
      RouterModule.forChild(DashboardsRoutes),
      SharedModule,  //&lt;-- Here
    ],
    exports: [DashboardComponent, AlternativeComponent]
  })
  export class DashboardsModule {}
  
  </code></pre>
  
  <pre><code>// dashboard.component.html
  &lt;h6 [permission]="permission" class="h2 text-white d-inline-block mb-0" &gt;Default&lt;/h6&gt;
  </code></pre>
  
  <p>Please help me!! T_T</p>