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

Related Articles

Back to top button