Two Way Binding in Angular 2

by Virender
January 4, 2016

Two way binding is very powerful feature of MVVM framework it automatically update View when model update.

We already used Two way binding in Angular 1.x with the help of ng-model. 

Today we are sharing a simple Two way binding demo in AngularJs 2. [(ngModel)] is use to bind model into form control. [(ngModel)] is use to Two way binding in AngularJs 2.

Plunker –


<!DOCTYPE html>
<html lang=”en”>
  <meta charset=”utf-8″>
  <title>Two Way Binding in Angular 2</title>
  <script src=””></script>
  <script src=””></script>
  <script src=””></script>
  <script src=””></script>
  <script src=””></script>
      transpiler: ‘typescript’,
      typescriptOptions: {emitDecoratorMetadata: true},
      packages: {app: {defaultExtension: ‘ts’}}


import {bootstrap} from ‘angular2/platform/browser’;
import { Component, View, NgFor, bootstrap } from ‘angular2/core’;
    selector: ‘Product-Order’,
    template: ‘Product Quantity – <input type=”number”  [(ngModel)] = “productQuantity”>’ +
    ‘<br>Product Quantity Ordered  – {{productQuantity}}’
class ProductComponent {
    productQuantity: int;
    constructor() {


You can learn more about ng-model here –


Two Way Binding in Angular 2

ng-model in Angular 2

Leave a Reply

Your email address will not be published. Required fields are marked *