Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

Photo by RealToughCandy.com: https://www.pexels.com/photo/person-holding-a-multicolored-sticker-with-text-11035396/

This is a very common error in Angular, and to fix it you simply need to import FormsModule in your module or directly in your standalone component starting from Angular 16+.

Here’s an example of basic angular app:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  imports: [ FormsModule ],
  selector: 'app-root',
  standalone: true,
  template: `
      <input [(ngModel)]="count" />
      {{ count }}
    
  `,
})
export class App {
  count = '';
}

bootstrapApplication(App);

Or you can see it through this Stackblitz example

Also, in recent versions, Angular 16+, this error has moved to:

Type ‘Event’ is not assignable to type ‘string’.

But the fix is still the same, just import FormsModule ! But be careful to import the correct module, not ReactiveFormsModule.

Explanation

There are two types of forms in Angular, the FormsModule that’s the simplest one and let’s you bind the value of your inputs and form elements directly into your components using the attribute ngModel.