[Angular 2] 9. Replace ng-modle with #ref & events

Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the application will show the result.

In Angular 1, you can use ng-model to finish all those stuff, but in angular 2, the concept behind has changed.

<!-- index.html -->
<html>
<head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<hello></hello>
<script>System.import('app');</script>
</body>
</html>

import {
    Component,
    View,
    bootstrap
} from 'angular2/angular2';

@Component({
    selector: 'hello'
})

@View({
    template: `
        <div>
            <label for="name">Name: </label>
            <input type="text" #ref (keyup)/>
            <hr />
            <h2>{{ref.value}}</h2>
        </div>
    `
})

export class Hello{

}

bootstrap(Hello);

We add a #ref, which you can name it anything you want after '#'. And then use 'ref.value' to the actual value from it.

But only this won't work.. you also need to watch it. In Angualr 2, this is acomplished by add even listener to the dom. Here we use '(keyup)'.