⚠️ This lesson is retired and might contain outdated information.

Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 2 years ago

Two-way binding still exists in Angular 2 and ngModel makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

[00:00] Now that we have the message through in Input, we can actually use ngModel on our Input element. That will look like this, [(ngModel)] with the square brackets, the parens, and then ngModel. This is combining two things we've talked about already where the parens represent an Event, and the square brackets represents pushing values in on Inputs.

[00:24] You can think of the square brackets and parens in a combination as two-way binding, where if we give it this message, when the message changes from outside of this Input it will push new value in. When the value changes from inside the Input, it will pass the new value out to this message. You can think of the parens as out, and the square brackets as in.

[00:48] You'll see that once I hit save, that if I change the value of this, I'll delete this and a couple of words, you'll see that the value above it changes as well. So this message and this message are staying in sync, because the value of this Input element is changing.

[01:06] From the other angle if were to in my constructor do a setInterval, and say every...We'll say this message is Math.random().toString() every one second, and now I hit save. You'll see that every second these values are changing and being pushed in, but if I type things inside the Input it's pushing them out.

[01:33] Changing this message from outside of the Input updates it, changing the message from inside of the Input updates it out. That's what these represent around the ngModel.

Eugene Cook
Eugene Cook
~ 7 years ago

Not sure if I missed it, but you have to import FormsModule for ngModel to work.

james
james
~ 7 years ago

Hey Eugene, you didn't miss it. It's not in the video.

For anyone else reading this, here is what I did to get it to work: in my app.module.ts file, near the top, I added: import { FormsModule } from '@angular/forms';

and further down in the file, in the NgModule annotation, in the array value for imports, I added FormsModule.

The final file looks like this: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component'; import { SimpleFormComponent } from './simple-form/simple-form.component'; import { MailService } from './mail.service'

@NgModule({ declarations: [ AppComponent, SimpleFormComponent ], imports: [ BrowserModule, FormsModule ], providers: [ { provide: 'mail', useClass: MailService }, { provide: 'api', useValue: 'http://localhost:3000'} ], bootstrap: [AppComponent] }) export class AppModule { }

Alexandre Cuva
Alexandre Cuva
~ 7 years ago

Can we get an update on what we should do now, it doesn't work at all:

@Component({ selector: 'app-simple-form', template: `<div> {{message}} <input #myInput type="text" [(ngModule)]="message"> <button (click)="onClick($event, myInput.value);">Click me</button>

</div> `, styles: [] })
Tyler Andor
Tyler Andor
~ 6 years ago

It's updated in the code but not the video. Definitely need an update to the video here for adding to app.module.ts:

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

...and adding FormsModule to the imports array.

Jake Sullivan
Jake Sullivan
~ 6 years ago

I added multiple imports in app.module.ts

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

also add the new imports below in app.module.ts

@NgModule({ imports: [BrowserModule, FormsModule, CommonModule],

This video needs some updates...

Markdown supported.
Become a member to join the discussionEnroll Today