Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Create a Basic Angular 2 ngModel Input

1:39 Angular 2 lesson by

ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2 FormsModule and use the proper syntax around the ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.

This lesson starts with a Angular 2 hello world app. To quickly set that up use the angular cli which will set up the boilerplate needed to get started.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2 FormsModule and use the proper syntax around the ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.

app/app.component.ts

import {Component} from "@angular/core";
@Component({
  selector: 'app',
  template: `
    Hello World
`
})
export class AppComponent {}

Starting from an Angular 2 "Hello, World," if I create an input and then add an ngModel attribute to it and assign that to username, you'll see that nothing happens other than just an input being set up.

app/app.component.ts

import {Component} from "@angular/core";
@Component({
  selector: 'app',
  template: `
    <input type="text" ngModel="username">
`
})
export class AppComponent {}

That's because in your modules, where you define your module setup, you need more than just a BrowserModule, you also need the FormsModule.

app/app.module.ts

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

I'll go ahead and import that, and include it, and you'll see that username is now set to the ngModel or the value of the input, but I don't want the string of username, I actually want the value of username. Go ahead and create a username.

app/app.component.ts

export class AppComponent {
  username = "John";
}

We'll give this a value of John, and we'll see if that changes anything, but unfortunately not, because what it's doing is evaluating this as a string because we told it not to evaluate it. To evaluate this as a property or a field on this class, you have to put a square brackets around it.

app/app.component.ts

import {Component} from "@angular/core";
@Component({
  selector: 'app',
  template: `
    <input type="text" [ngModel]="username">
`
})
export class AppComponent {
  username = "John";
}

That way, when you save, it's going to go ahead and look up this username and assign it to ngModel. Now, you might think you could take that username and place it in some curly braces and that when you start typing -- you see it's John already -- but when I start typing, it doesn't add anything.

app/app.component.ts

import {Component} from "@angular/core";
@Component({
  selector: 'app',
  template: `
    <input type="text" [(ngModel)]="username">
    {{username}}
`
})

That's because in my ngModel, if I want this two-way binding, where right now, it's inputting this and setting this. If I want to get that value out as an event, you also have to add the parens around it, so that every time the ngModel or the value of the input changes, it also sends out an event to update this. Now, if I delete and type something, you'll see this updating as well.

Output

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?