title: Can't bind to 'ngModel' since it isn't a known property of 'input' angular 5 with pug
body: <p>I've got the following error when launching my Angular app.
  this problem happens only when i am using pug but the code works fine with html.</p>
  
  <p>this is my app.module.ts </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms'; 
  import { AppComponent } from './app.component'; 
  import { HeroesComponent } from './heroes/heroes.component'; 
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule
    ],
    declarations: [
      AppComponent,  
      HeroesComponent, 
    ], 
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>and this is my pug </p>
  
  <pre><code>h2 {{ hero.name | uppercase}} Details
  div
    span id: 
    | {{hero.id}}
  div
    span name: 
    | {{hero.name}}
  
  
  input([(ngmodel)]='hero.name', placeholder='name') 
  </code></pre>
  
  <p>any idea how to convert that line in such a way to make angular understand that line: <code>input([(ngmodel)]='hero.name', placeholder='name')</code> </p>