Not able to use ng-model - angular2-directives

Question

Not able to use ng-model. I am getting this error even after importing
formsmodule in app.module.ts Below is my both the file component and module. Please correct me where I am wrong. Thanks In Advance
Promise rejection: Template parse errors:
Can't bind to 'ng-model' since it isn't a known property of 'input'. ("
<div>
<label>name: </label>
<input type="text" [ERROR ->][(ng-model)]="hero.name" placeholder="name">
</div>
"): ng:///AppModule/AppComponent.html#5:28 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:`enter code here`
Can't bind to 'ng-model' since it isn't a known property of 'input'. ("
<div>
<label>name: </label>
<input type="text" [ERROR ->][(ng-model)]="hero.name" placeholder="name">
</div>
"): ng:///AppModule/AppComponent.html#5:28
at syntaxError (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:1513:34) [<root>]
at TemplateParser.parse (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:11522:19) [<root>]
at JitCompiler._compileTemplate (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:25296:39) [<root>]
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:25220:62) [<root>]
at Set.forEach (native) [<root>]
at JitCompiler._compileComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:25220:19) [<root>]
at createResult (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:25105:19) [<root>]
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:43) [<root> => <root>]
at http://localhost:3000/node_modules/zone.js/dist/zone.js:760:57 [<root>]
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:165:47) [<root> => <root>]
at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:593:35) [<root>]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:464:25) [<root>] Error: Template parse errors:
This is my app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
This is my app.component.ts:
import { Component } from '#angular/core';
export class Hero{
id: number;
name: string;
}
#Component({
selector: 'my-app',
template: `<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input type="text" [(ng-model)]="hero.name" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'Angular';
hero :Hero = {
id: 1,
name: 'windstorm'
};
}

Answer 1

It's ngModel, not ng-model.
So it should be:
<input type="text" [(ngModel)]="hero.name" placeholder="name">
See Template Syntax.