Angular 2 Example - User Input

import {Component}           from 'angular2/core';

import {ClickMeComponent}    from './click-me.component';
import {ClickMeComponent2}   from './click-me2.component';

import {LoopbackComponent}   from './loop-back.component';

import {KeyUpComponent_v1,
        KeyUpComponent_v2,
        KeyUpComponent_v3,
        KeyUpComponent_v4}   from './keyup.components';

import {LittleTourComponent} from './little-tour.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [

    LittleTourComponent
  ]
})
export class AppComponent { }

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

import {Component} from 'angular2/core';

@Component({
  selector: 'little-tour',
  template: `
    <input #newHero
      (keyup.enter)="addHero(newHero.value)"
      (blur)="addHero(newHero.value); newHero.value='' ">

    <button (click)=addHero(newHero.value)>Add</button>
    <br>
    
    <input #query
      (keyup.enter)="queryHero(query.value)">
      <button (click)=searchHero(queryHero.value)>Search</button>

    <ul><li *ngFor="#hero of heroes">{{hero}}</li></ul>
  `
})
export class LittleTourComponent {
  heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  addHero(newHero:string) {
    if (newHero) {
      this.heroes.push(newHero);
    }
  }
  
  searhHero(query:string){
    //what to put here?
  }
}

import {Component} from 'angular2/core';
@Component({
  selector: 'loop-back',
  template:`
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

fieldset {border-style:none}
img {height: 100px;}
.box {border: 1px solid black; padding:3px}
.child-div {margin-left: 1em; font-weight: normal}
.hidden {display: none}
.parent-div {margin-top: 1em; font-weight: bold}
.special {font-weight:bold;}
.toe {margin-left: 1em; font-style: italic;}
little-hero {color:blue; font-size: smaller; background-color: Turquoise }

<p>
  <click-me></click-me>
</p>

<p>
  <click-me2></click-me2>
</p>

<h4>Give me some keys!</h4>
<div><key-up1></key-up1></div>

<h4>keyup loop-back component</h4>
<div><loop-back></loop-back></div>
<br><br>

<h4>Give me some more keys!</h4>
<div><key-up2></key-up2></div>

<h4>Type away! Press [enter] when done.</h4>
<div><key-up3></key-up3></div>

<h4>Type away! Press [enter] or click elsewhere when done.</h4>
<div><key-up4></key-up4></div>

<h4>Little Tour of Heroes</h4>
<p><i>Add a new hero</i></p>
<div><little-tour></little-tour></div>

<!DOCTYPE html>
<html>
  <head>
    <title>User Input</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

</html>