Angular 5 - Can't bind to 'ngModule' since it isn't a known property of 'input'

Question

I'm following an online tutorial on Angular 5, using Visual Studio Code with an up-to-date angular version:

• Angular CLI: 7.0.6

• Node: 10.7.0

• Angular: 7.0.4,

VS Code doesn't thrown any error, but the browser console displays an error when I add [(ngModel)]="inputText" to my HTML :

Error: Template parse errors:

Can't bind to 'ngModule' since it isn't a known property of 'input'. ("<input type="text" [ERROR ->][(ngModule)]="inputText" />

"): ng:///AppModule/HomeComponent.html@0:19

syntaxError

./node_modules/@angular/compiler/fesm5/compiler.js/TemplateParser.prototype.parse compiler.js:2547

Reading other posts for similar errors, they mainly point out that either the import "{ FormsModule }" and "imports: [ FormsModule]" are missing or that "[(ngModule)]=" is misspelled. Which doesn't seem to be the case.

It feels that the declaration on app.module.ts is not being applied on the html page and I've no idea why. I've got all pages saved, the package.json file has @angular/forms as a dependency, and any simpler code works, including the one-way data binding.

Here are my relevant files:

home.component.html

`<input type="text" [(ngModule)]="inputText" />`

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  inputText: string = "";

  constructor() { }

  ngOnInit() {
  }
}

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

My questions are:

• Where's the error?

• What can I do to troubleshoot this error?

Answer 1

I think you should replace [(ngModule)] with [(ngModel)] .

There's no Angular built in directive called ngModule.

ngModule:

Angular built in block that used to declare some components, directives, services, .. etc together, and used by decorator @NgModule({}) .

ngModel:

Angular built in directive that used to bind data between component and HTML, and used by ngModel selector to activate it.