AngularJS, input textbox not even showing

Question

I'm just running some basic default boiler plate code and I edited this file:

app.component.html

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

app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name = ''; } 

But this literally does nothing. There is just a blank page. What am I doing wrong? This seems so basic

Answer 1

Since ngModel directive included in FormsModule, you have to import and add that module inside imports metadata option of your AppModule.

Code

import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; //<-- FormsModule import import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], //<-- added FormsModule to imports option declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

Demo Here