title: why why my customer directive does not work?
body: <p>My main purpose is to use customer directive to show different pages depend on the user login  or logout</p>
  <pre><code>    &lt;!-- Show this for logged out users --&gt;
      &lt;ul *appShowAuthed=&quot;false&quot;
          class=&quot;nav navbar-nav pull-xs-right&quot;&gt;
          &lt;li class=&quot;nav-
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; routerLink=&quot;/register&quot; routerLinkActive=&quot;active&quot;&gt;
                  Sign up
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;!-- Show this for logged out users --&gt;
      &lt;ul *appShowAuthed=&quot;true&quot;
          class=&quot;nav navbar-nav pull-xs-right&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a 
                  class=&quot;nav-link&quot; 
                  routerLink=&quot;/&quot;
                  routerLinkActive=&quot;active&quot;
                  [routerLinkActiveOptions]=&quot;{ exact: true }&quot;&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  <p>my customer directive</p>
  <pre><code> import { UserService } from './user.service';
  import { Directive, TemplateRef, ViewContainerRef, OnInit, Input } from '@angular/core';
  
  @Directive({
    selector: '[appShowAuthed]'
  })
  export class ShowAuthedDirective implements OnInit {
  
    constructor(
      private templateRef: TemplateRef&lt;any&gt;,
      private userService: UserService,
      private viewContainerRef: ViewContainerRef
    ) {}
  
    condition: boolean;
  
    ngOnInit() {
      this.userService.isAuthenciated.subscribe(
        (isAuthenticated) =&gt; {
          if (isAuthenticated &amp;&amp; this.condition || !isAuthenticated &amp;&amp; !this.condition) {
            this.viewContainerRef.createEmbeddedView(this.templateRef);
          } else {
            this.viewContainerRef.clear();
          }
        }
      );
    }
  
    @Input() set appShowAuthed(condition: boolean) {
      this.condition = condition;
    }
  
  }
  </code></pre>
  <p>I import it in my header module</p>
  <pre><code>import { ShowAuthedDirective } from './../show-authed.directive';
  import { NgModule } from '@angular/core';
  
  
  @NgModule({
      declarations: [
          HeaderComponent,
          ShowAuthedDirective
      ],
  
      imports: [],
      providers: []
  })
  
  export class headerModule {}
  </code></pre>
  <blockquote>
  <p>but when I launch it, in google chrome it show this: core.js:7813 Can't bind to 'appShowAuthed' since it isn't a known property of 'ul'</p>
  </blockquote>