title: Can't bind to 'authorize' since it isn't a known property of 'li'
body: <p>On a <code>HeaderComponent</code> I am using an <code>authorize</code> directive:</p>
  
  <pre><code>&lt;li *authorize="'SignedIn'"&gt;&lt;button (click)="signIn()"&gt;Sign In&lt;/button&gt;&lt;/li&gt;
  </code></pre>
  
  <p>But I get the error:</p>
  
  <pre><code>Can't bind to 'authorize' since it isn't a known property of 'li'. 
  </code></pre>
  
  <p>The <code>HeaderComponent</code> is added to a HeaderModule:</p>
  
  <pre><code>@NgModule({  
    declarations: [    
      HeaderComponent
    ],  
    imports: [
      CommonModule,
      PopupModule
    ],  
    exports: [
      HeaderComponent
    ]
  })
  </code></pre>
  
  <p>The <code>HeaderModule</code> and the <code>AuthorizeDirective</code> are added to a <code>SharedModule</code>:</p>
  
  <pre><code>@NgModule({
    declarations: [ 
      AuthorizeDirective
    ],    
    imports: [ 
      CommonModule
    ],
    exports: [ 
      HeaderModule,
      AuthorizeDirective
    ]
  })
  </code></pre>
  
  <p>And the <code>SharedModule</code> is added to <code>AppModule</code>.</p>
  
  <p>What am I missing?</p>
  
  <p>The authorize directive is:</p>
  
  <pre><code>@Directive({
    selector: '[authorize]'
  })
  
  export class AuthorizeDirective implements OnInit {
  
    private notifier: Subscription;
  
    requirement: Requirement;
    id: number;
  
    @Input() set authorize(requirement: string) {
      this.requirement = Requirement[requirement];
    }
  
    @Input() set authorizeId(id: number) {
      this.id = id;
    }
  
    ngOnInit() { 
  
    }
  
  }
  </code></pre>