0

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

Pengyy
  • 37,383
  • 15
  • 83
  • 73
Bana
  • 117
  • 1
  • 8

1 Answers1

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

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • @Bana No way, please check plunker.. the `app.module.ts` is the file which you're looking for. – Pankaj Parkar Aug 14 '17 at 21:40
  • Thanks bro. It's working. But I'm curios, why was this not provided? I am watching a tutorial and he just did the same basic creation and simply used `[(ngModule)]` right off the bat without needing any of this? – Bana Aug 14 '17 at 21:42
  • @Bana I don't to re-write everything here, can you please refer [Angular 2 two way binding using ngModel is not working](https://stackoverflow.com/a/31624864/2435473) which has everything mentioned precisely – Pankaj Parkar Aug 14 '17 at 21:51