title: Angular 8 - Cannot use directives - can't bind since it is not a known property
body: <p>I have created a very simple directives (straight from the documentation just to make it work), however, I keep getting this error:</p>
  <pre><code>Uncaught Error: Template parse errors:
  Can't bind to 'appHasPermission' since it isn't a known property of 'button'. (&quot;
                  (click)=&quot;navigateToSingleCompany()&quot;
                  [translate]=&quot;'register.text.company'&quot;
                  [ERROR -&gt;]*appHasPermission=&quot;true&quot;
              &gt;
                  Company
  &quot;): ng:///DashboardModule/CompaniesOverviewCardComponent.html@41:4
  Property binding appHasPermission not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the &quot;@NgModule.declarations&quot;.
  </code></pre>
  <p>The directive is my shared module:</p>
  <pre><code>import { NgModule } from &quot;@angular/core&quot;;
  import { CommonModule } from &quot;@angular/common&quot;;
  import { NavMenuComponent } from &quot;./layout/nav-menu/nav-menu.component&quot;;
  import { CoreModule } from &quot;../core/core.module&quot;;
  import { RouterModule } from &quot;@angular/router&quot;;
  import { SideNavComponent } from &quot;./layout/side-nav/side-nav.component&quot;;
  import { RegisterCompanyFormComponent } from &quot;./components/register-company-form/register-company-form.component&quot;;
  import { ReactiveFormsModule } from &quot;@angular/forms&quot;;
  import { ErrorCardComponent } from &quot;./components/error-card/error-card.component&quot;;
  import { HasPermissionDirective } from &quot;./directives/has-permission.directive&quot;;
  
  @NgModule({
      declarations: [
          NavMenuComponent,
          SideNavComponent,
          RegisterCompanyFormComponent,
          ErrorCardComponent,
          HasPermissionDirective,
      ],
      imports: [CommonModule, CoreModule, RouterModule, ReactiveFormsModule],
      exports: [
          NavMenuComponent,
          SideNavComponent,
          RegisterCompanyFormComponent,
          ErrorCardComponent,
          CommonModule,
          HasPermissionDirective,
      ],
  })
  export class SharedModule {}
  </code></pre>
  <p>The directive simply looks like this now:</p>
  <pre><code>import { Directive, Input, TemplateRef, ViewContainerRef } from &quot;@angular/core&quot;;
  
  @Directive({
      selector: &quot;[appHasPermission]&quot;,
  })
  export class HasPermissionDirective {
      private hasView = false;
  
      constructor(
          private templateRef: TemplateRef&lt;any&gt;,
          private viewContainer: ViewContainerRef
      ) {}
  
      @Input() set hasPermission(condition: boolean) {
          if (!condition &amp;&amp; !this.hasView) {
              this.viewContainer.createEmbeddedView(this.templateRef);
              this.hasView = true;
          } else if (condition &amp;&amp; this.hasView) {
              this.viewContainer.clear();
              this.hasView = false;
          }
      }
  }
  </code></pre>
  <p>And it is called like this:</p>
  <pre><code>        &lt;button
              class=&quot;btn btn-dark&quot;
              (click)=&quot;navigateToSingleCompany()&quot;
              [translate]=&quot;'register.text.company'&quot;
              *appHasPermission=&quot;true&quot;
          &gt;
              Company
          &lt;/button&gt;
  </code></pre>
  <p>I have added the directive in the declarations and in the exports within the shared module, and I have imported the shared module into every other module that I use. I am not sure what else to do.</p>