title: Template parse errors: Can't bind to DIRECTIVE since it isn't a known property of 'div'
body: <p>I have looked at the questions regarding this error, and have not found a solution.</p>
  
  <p>I have a highlight directive, and I take an input <code>index</code>. This directive works when I declare it in the module I'm using it in. But I want to use it in several modules, So I removed the declaration, and put it inside of my root module that imports the errors. That is when I get the error:</p>
  
  <pre><code> Error: Template parse errors:
  Can't bind to 'index' since it isn't a known property of 'div'. ("
                  &lt;div class="read row"
                      appListHighlight
                      [ERROR -&gt;][index]="index"
                  &gt;
                      &lt;div class="col"&gt;&lt;/div&gt;
  "): ng:///NetworkModule/DnsComponent.html@15:20
  </code></pre>
  
  <p>My directive:</p>
  
  <pre><code>import { Directive, Input, Renderer2, ElementRef, HostBinding, OnInit } from '@angular/core';
  
  @Directive({
      selector: '[appListHighlight]'
  })
  export class ListHighlightDirective implements OnInit{
      @HostBinding('style.backgroundColor') backgroundColor = 'transparent';
  
      @Input() index: string;
  
      constructor() {}
  
      ngOnInit() {
  
          console.log('APP', this.index);
  
          if (+this.index % 2 === 0) {
              this.backgroundColor = 'rgba(128, 128, 128, 0.08)'
          }
      }
  }
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;div class="read row"
                      appListHighlight
                      [index]="index"
  &gt;
  </code></pre>
  
  <p>the html is part of a component inside my network module, which is imported into my root module like so</p>
  
  <pre><code>import { ListHighlightDirective } from './shared/list-highlight.directive';
  import { NetworkModule } from './network/network.module';
  
  declarations: [
      AppComponent,
      ListHighlightDirective
  ],
  </code></pre>
  
  <p>So what is happening? why does this work when the directive is imported to my networkModule, but not my root module? doesn't the root module compile everything in the app that it imports so all the imports are included?</p>
  
  <p>--------------------______UPDATE_____------------------------</p>
  
  <p>I created a shared module, and imported it, but i'm getting the same error. my module looks like this:</p>
  
  <pre><code>import { ListHighlightDirective } from './list-highlight.directive';
  import { CommonModule } from '@angular/common';
  import { NgModule } from '@angular/core';
  
  @NgModule({
      declarations: [
          ListHighlightDirective
      ],
      imports: [
          CommonModule
      ]
  })
  
  export class SharedModule { }
  </code></pre>