Angular 4 Error when using Directives

Question

I have the following directive declaration:

import {
  Directive,
  Input,
  OnInit,
  TemplateRef,
  ViewContainerRef
} from '@angular/core';

import { UserService } from './services/user.service';

    @Directive({ selector: '[appShowAuthed]' })
    export class ShowAuthedDirective implements OnInit {

      condition: boolean;
      constructor(
        private templateRef: TemplateRef<any>,
        private userService: UserService,
        private viewContainer: ViewContainerRef
      ) {}
      ngOnInit() {
        this.userService.isAuthenticated.subscribe(
          (isAuthenticated) => {
            if (isAuthenticated && this.condition || !isAuthenticated && !this.condition) {
              this.viewContainer.createEmbeddedView(this.templateRef);
            } else {
              this.viewContainer.clear();
            }
          }
        );
      }

      @Input() set showAuthed(condition: boolean) {
        this.condition = condition;
      }
    }

And I have defined it in the declarations of my NgModule as below:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { ListErrorsComponent } from './list-errors.component';
import { ShowAuthedDirective } from './show-authed.directive';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule
  ],
  declarations: [
    ListErrorsComponent,
    ShowAuthedDirective,
  ],
  exports: [
    CommonModule,
    FormsModule,
    ListErrorsComponent,
    ReactiveFormsModule,
    HttpModule,
    RouterModule,
    ShowAuthedDirective
  ]
})
export class SharedModule {}

But when I use it in my html component as below:

<nav class="navbar navbar-light">
  <div class="container">
    <a class="navbar-brand" routerLink="/">plant-simulator</a>

    <!-- Show this for logged out users -->
    <ul *appShowAuthed="false"
        class="nav navbar-nav pull-xs-right">

      <li class="nav-item">
        <a class="nav-link"
          routerLink="/register"
          routerLinkActive="active">
          Sign Up
        </a>
      </li>

    </ul>
    <ul *appShowAuthed="true"
        class="nav navbar-nav pull-xs-right">
      <!-- Show this for logged in users -->
      <li class="nav-item">
        <a class="nav-link"
          [routerLink]="['/profile', currentUser.id]"
          routerLinkActive="active">
          <img [src]="currentUser.image" *ngIf="currentUser.image" class="user-pic" />
          {{ currentUser.email }}
        </a>
      </li>
    </ul>

  </div>
</nav>

I get some errors as can be seen in the screen shot below:

Any clues as to why it is complaining about parsing?

Answer 1

I had to rename the directive to match the class declaration:

@Directive({ selector: '[showAuthed]' })

Notice the selector now matches the name of the class ShowAuthedDirective