title: Angular 4 Custom directives confusion
body: <p>So I've started learning angular recently. I've gotten to the point where I want to start making custom directives. After some research I gathered that there is only a few steps required to do this.</p>
  
  <ol>
  <li>Create the directive</li>
  <li>Import it in your app module</li>
  <li>Include it in the app module declarations array</li>
  <li>Use it in the template of a component</li>
  </ol>
  
  <p>With this in mind I set out to create a custom directive that would just simply change the background color of the element the attribute directive was attached to. However, my directive didn't seem to work. 
  I then tried including it in my routing module and then the directive worked...</p>
  
  <p>Why do I have to include it in the routing module? That feels less global and I feel like i'd rather include it in root module directly so that I can use the directive throughout the entire app. Shouldn't it still work if I include it only in the app root module?</p>
  
  <p>Would it be better to create a separate module for the directive and then export that module and import it in the root module? Or is importing the directive in my routing module okay?</p>
  
  <h1>Updated</h1>
  
  <h2><code>app.module.ts</code></h2>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  // Routing Module
  import { AppRoutingModule } from './app-routing.module';
  // app layout components
  import { AppComponent } from './app.component';
  import { AppNavbarComponent } from './components/app-navbar/app-navbar.component';
  import { AppFooterComponent } from './components/app-footer/app-footer.component';
  
  
  @NgModule({
    declarations: [
      AppNavbarComponent,
      AppFooterComponent,
      AppComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <h2><code>app-routing.module.ts</code></h2>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  // Routing Components
  import { AboutComponent } from './components/about/about.component';
  import { HomeComponent } from './components/home/home.component';
  import { PageNotFoundComponent } from './components/page-not-
  found/page-not-found.component';
  // Directives
  import { TestDirective } from './directives/test/test.directive';
  
  const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '**', component: PageNotFoundComponent }
  ];
  
  @NgModule({
    declarations: [
      AboutComponent,
      HomeComponent,
      PageNotFoundComponent,
      TestDirective
    ],
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <h2><code>app-component.html</code></h2>
  
  <pre><code>&lt;app-navbar&gt;&lt;/app-navbar&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>So the problem being that the navbar and footer appear to not have access to the directive if I include it in the <code>app-routing.module.ts</code> file but if I include the directive in the <code>app.module.ts</code> file, the directive appears to only work for the navbar and footer but not any of the individual routes. Obviously I cant include the directive in both modules.</p>
  
  <p>I can however use any of the built in angular directives, such as <code>ngIf</code>, from anywhere in the app. I'd like for my directive to have that same scope.</p>