Get Started with Angular
Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding
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.
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 { }
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: [] })
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.
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...
Not sure if I missed it, but you have to import FormsModule for ngModel to work.