Two Way Binding in Angular 2

on

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 - http://plnkr.co/edit/uWJIC6l6SQLkyRICf2bs?p=preview



Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two Way Binding in Angular 2</title>
 
  <script src="https://npmcdn.com/angular2@2.0.0-beta.0/bundles/angular2-polyfills.js"></script>
  <script src="https://npmcdn.com/typescript@1.7.5/lib/typescript.js"></script>
  <script src="https://npmcdn.com/systemjs@0.19.8/dist/system.src.js"></script>
  <script src="https://npmcdn.com/rxjs@5.0.0-beta.0/bundles/Rx.js"></script>
  <script src="https://npmcdn.com/angular2@2.0.0-beta.0/bundles/angular2.dev.js"></script>
 
  <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {emitDecoratorMetadata: true},
      packages: {app: {defaultExtension: 'ts'}}
    });
  </script>
</head>
<body>
 <script>System.import('app/app');</script>
  <Product-Order></Product-Order>
</body>
</html>

app.ts

import {bootstrap} from 'angular2/platform/browser';
import { Component, View, NgFor, bootstrap } from 'angular2/core';
@Component({
    selector: 'Product-Order',
    template: 'Product Quantity - <input type="number"  [(ngModel)] = "productQuantity">' +
    '<br>Product Quantity Ordered  - {{productQuantity}}'
})
class ProductComponent {
 Product=[];
    productQuantity: int;
    constructor() {
          this.productQuantity=5;
    }
}

bootstrap(ProductComponent);

You can learn more about ng-model here - https://angular.io/docs/ts/latest/api/common/NgModel-directive.html

Keywords

Two Way Binding in Angular 2

ng-model in Angular 2


Comments

Post a Comment