Two way Data Binding Example

app.component.ts

import {Component} from 'angular2/core';
import {PropertyBindingComponent} from "./property-binding.component";
@Component({
    selector: 'app',
    template: `
        <section class="parent">
            <h2>This is the parent component</h2>
            <h4>Please, enter   your name:</h4>
            <input type="text" [(ngModel)]="name">
            <br><br>
            <section class="child">
                <my-property-binding>
                 [myName]="name" [myAge]="26"
                </my-property-binding>
            </section>
        </section>
    `,
    directives: [PropertyBindingComponent]
})
export class AppComponent {
    name = '';
}

boot.ts

/// <reference path="../typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";

bootstrap(AppComponent);

property-binding.component.ts

import {Component} from 'angular2/core';

@Component ({
    selector: 'my-property-binding',

    template: `
            <h2>This is a child component</h2>
            <p>Hey, my name is {{myName}} and I am {{myAge}} years old!</p>
       `,
    inputs: ['myName', 'myAge']

})
export class PropertyBindingComponent {
    myName = '';
    myAge = 20;
}