Javascript
The Difference between (ngModel) and [(ngModel)] with Example – AngularJS 2
What is the difference between (ngModel)
and [(ngModel)]
?
I know you’re in a hurry for the answer, but a bit of understanding helps. The answer is:
(ngModel)
causes a 1-way data-binding, whereas[(ngModel)]
ensures a two-way data binding.
So, let’s do it with an example for understanding.
Below is a typical example taken from my Ionic 2 Series of articles:
<ion-content padding> <p> Start typing. myForm FormGroup (which 'subject' and 'message' are controls within) is 2-way binding automatically. </p> <p> Independently, 'subject' is two-way binding, and 'message' one-way binding. </p> <ion-list inset> <form #myForm='ngForm' (ngSubmit)="onSubmit(myForm)"> <ion-item> <ion-label floating>Subject</ion-label> <ion-input type="text" [(ngModel)]="subject" name="subject"></ion-input> </ion-item> <ion-item> <ion-label floating>Message</ion-label> <ion-textarea type="text" [ngModel]="message" name="message"></ion-textarea> </ion-item> <button block> <ion-icon name="add"></ion-icon>Submit</button> </form> </ion-list> <p> 'myForm' FormGroup 2-way binding: {{ myForm.value | json }} </p> <h5>This is two-way bound</h5> Subject (updates when typing): "{{ subject }}" <h5>This is one-way bound</h5> Message (doesn't update when typing): "{{ message }}" <h4 *ngIf="subData">I show after Submission</h4> <p *ngIf="subData">Message After Submit: "{{ subData.message }}"</p> </ion-content>
Our associated controller might look like this:
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ templateUrl: 'build/pages/basicform/basicform.html', }) export class BasicformPage { myData: any; subData: any; constructor(private navCtrl: NavController) { } onSubmit(formData) { if(formData.valid) { console.log(formData.value); this.subData = formData.value; } } }
See in action:
https://youtu.be/ccoUMJ5diRI