Can't bind to 'ngModel' since it isn't a known property of 'input' angular 5 with pug

Question

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.

this is my app.module.ts

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 { }

and this is my pug

h2 {{ hero.name | uppercase}} Details
div
  span id: 
  | {{hero.id}}
div
  span name: 
  | {{hero.name}}


input([(ngmodel)]='hero.name', placeholder='name') 

any idea how to convert that line in such a way to make angular understand that line: input([(ngmodel)]='hero.name', placeholder='name')

Answer 1

Error coz of case sensitive :

It's ngModel not ngmodel .

---

So Change :

input([(ngmodel)]='hero.name', placeholder='name') 

To :

input([(ngModel)]='hero.name', placeholder='name')