Can't bind to '{ngModel}' since it isn't a known property of 'input'

This sneppet shows you how to resolve the following error Can’t bind to ‘{ngModel}’ since it isn’t a known property of ‘input’ while launching your angular application.

Solution

There are couple of reasons why you may be facing this error. For example, let’s say you have the following code in app.component.html file and you see the above error, it means that angular does not understand what ‘ngModel’ is.

<input type="text" [(ngModel)]="name">
<p>{{name}}</p>

The tool provided by angular called directive which is known as ngModel within square bracket and the parenthesis is used on the input html tag, basically to get whatever you type in the input text box and store it in the model called “name”.

And output the value of the model “name” in the input {{name}}

Angular is divided in to multiple modules, you can say sub packages. If you want to use certain feature from these sub packages or modules, you need to import/add them. To add such feature you need go to app.module.ts file and import the necessary angular sub packages.

Make sure that you have imported Forms Module from Angular import { FormsModule } from ‘@angular/forms’ as shown below and add FormsModule under imports: which Angular understands and to use form features.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After adding the above code if still does not work for you, then you need to check ngModel syntax whether you are using square brackets and parenthesis correctly.

Also Read

Solution

References