Angular Binding errror - Can't bind to 'ngModel' since it isn't a known property of 'input'...

I created a component class as below and i am trying to bind the class fields to template but i am seeing below error

ERROR in src/app/admin/projects/projects.component.html:41:34 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. name="ProjectID" [(ngModel)]="newProject.projectID">


Error occurs in the template of component ProjectsComponent. src/app/admin/projects/projects.component.html:49:36 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. name="ProjectName" [(ngModel)]="newProject.projectName"> src/app/admin/projects/projects.component.ts:7:16 templateUrl: './projects.component.html',
​

export class ProjectsComponent implements OnInit {

projects : Project[];
newProject : Project = new Project();
constructor(private projectSevice : ProjectsService) {

}


I am trying to bind the Project properties to the template as below.

<div class="form-group row">
<label for="txtNewProjectID" class="col-sm-4 col-form-label">Project ID</label>
<div class="col-sm-8">
<input type="text" id="txtNewProjectID" style="width:100px" class="form-control" placeholder="Project ID"
name="ProjectID" [(ngModel)]="newProject.projectID">
</div>
</div>

<div class="form-group row">
<label for="txtNewProjectName" class="col-sm-4 col-form-label">Project Name</label>
<div class="col-sm-8">
<input type="text" id="txtNewProjectName" class="form-control" placeholder="Project Name"
name="ProjectName" [(ngModel)]="newProject.projectName">
</div>
</div>


Below is the Project class

export class Project {

projectID: number;
projectName: string;
dateOfStart: string;
teamSize: number;

constructor(){
this.projectID = 0;
this.projectName = null;
this.dateOfStart = null;
this.teamSize = 0;
}
}


I am not able to figure out what mistake i did

Continue reading...