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



