Fix can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ Error

To fix this error you have to import the FormsModule in your app.module.ts file. The ngModel directive is a part of the FormsModule. Therefore, if you want to use it in your template file, you have to import the FormsModule in the corresponding module.ts file.

You can import the FormsModule from Angular’s forms library.

See the following implementation:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule} from '@angular/forms';

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

Note: If your application has more than one module.ts file, you have to import the FormsModule in each module wherever you are using the ngModel directive.

OR if you have a common shared module, you have to add the FormsModule in both the imports as well as the exports section of the shared.module.ts file.

It is important to add the FormsModule to the exports section of the shared module(if any) because whichever module is importing it, could use all of its imported modules.