title: Angular 7: Can't bind to 'directive' since it isn't a known property of 'element'
body: <p>I'm trying to create a custom directive and I get this error:</p>
  
  <p><a href="https://i.stack.imgur.com/lKxVv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lKxVv.png" alt="enter image description here"></a></p>
  
  <p>The directive is included in declarations inside @NgModule. Nonetheless is not working. If you need more information on the error just ask. I don't know what's going on.</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;input class="text" [appInputFormat]&gt;
  </code></pre>
  
  <p>input-format.directive.ts</p>
  
  <pre><code>[![import { Directive, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[appInputFormat]'
  })
  export class InputFormatDirective {
  
      constructor(){};
  
    @HostListener('focus')  onFocus(){
      console.log('on Focus');
    }
    @HostListener('blur')  onBlur(){
      console.log('on Blur');
    }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule} from '@angular/forms';
  
  
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { CourseComponent } from './course/course.component';
  import { FavoriteComponent } from './favorite/favorite.component';
  import { PanelComponent } from './panel/panel.component';
  import { LikeButtonComponent } from './like-button/like-button.component';
  import { LikeCountComponent } from './like-count/like-count.component';
  import { DirectivesComponent } from './directives/directives.component';
  import { HiddenComponent } from './hidden/hidden.component';
  import { SwitchcaseComponent } from './switchcase/switchcase.component';
  import { ForComponent } from './for/for.component';
  import { TrackbyComponent } from './trackby/trackby.component';
  import { IfComponent } from './if/if.component';
  import { StyleComponent } from './style/style.component';
  import { TransopComponent } from './transop/transop.component';
  import { InputFormatDirective } from './input-format.directive';
  
  @NgModule({
    declarations: [
      AppComponent,
      CourseComponent,
      FavoriteComponent,
      PanelComponent,
      LikeButtonComponent,
      LikeCountComponent,
      DirectivesComponent,
      HiddenComponent,
      SwitchcaseComponent,
      ForComponent,
      TrackbyComponent,
      IfComponent,
      StyleComponent,
      TransopComponent, 
      InputFormatDirective
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule,
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>