0

I'm following this Angular 4 tutorial:

https://youtu.be/z6qFqlwUxkQ?t=16m33s

And in that part of the video he has the following code:

View:

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

Controller:

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

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

It works for him but not for me, I'm not getting any compilation errors but the page is blank, I don't see an input field at all. Any idea why? I have the exact same code and am using Angular 4 also..

EDIT:

here's the contents of app.modue.ts:

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • are you using angular cli? – brk Jul 18 '17 at 14:34
  • @brk yes I 'm using angular cli –  Jul 18 '17 at 14:35
  • you don't have any errors in the console ? If not this is probably a routing issue – Tonio Jul 18 '17 at 14:36
  • 2
    I guess you missed to import `FormsModule` where `ngModel` directive resides, check [Angular 2 two way binding using ngModel is not working](https://stackoverflow.com/a/31624864/2435473) – Pankaj Parkar Jul 18 '17 at 14:36
  • 1
    Likely what @PankajParkar mentioned. Check browser console for errors when there aren't compilation errors. – Z. Bagley Jul 18 '17 at 14:40
  • @Z.Bagley Yes I do see a error in the console, it's `compiler.es5.js:1690 Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. ("][(ngModel)]="name">

    {{ name }}

    "): ng:///AppModule/AppComponent.html@0:19`
    –  Jul 18 '17 at 14:52

1 Answers1

0

Can you post code for app-module.ts I suspect you are missing something inside @ngModule Compare that to the video... I suspect it's one of FormsModule or ReactiveFormsModule
haven't watched video... You'll probably be using FormsModule if it's a Hello World type scenario.

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

NgModule({
....
imports: [      ..., 
   FormsModule,  
    ReactiveFormsModule]
....
})
export class AppModule {
}
JGFMK
  • 8,425
  • 4
  • 58
  • 92
  • Hi, please check my edit. I very well could be missing something, I haven't touched that file yet. –  Jul 18 '17 at 15:03
  • I've just updated the answer to provide the some code snippets/import hints. – JGFMK Jul 18 '17 at 15:04
  • Yep working now, thanks! I guess the tutorial guy missed showing u need to update this whole part. –  Jul 18 '17 at 15:05