import {Component} from 'angular2/core';
import {ClickMeComponent} from './click-me';
import {KeyUpComponent} from './keyup';
import {LoopbackComponent} from './loopback';
import {FocusComponent} from './focus';

@Component({
    selector: 'appTest',template: `
    <h1>Angular 2 App</h1>
    <click-me></click-me>
    <key-up></key-up>
    <h2>loopback</h2>
    <loopback></loopback>
    <h2>myfocus</h2>
    <myfocus></myfocus>
    `,directives: [ClickMeComponent,KeyUpComponent,LoopbackComponent,FocusComponent],})
export class App {

}

/**
 * Created by dell on 2016/9/8.
 */
import {Component} from 'angular2/core';
@Component({
    selector: 'click-me',template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
    clickMessage = '';
    onClickMe(){
        this.clickMessage ='欢迎来到Angular 2.0 !';
    }
}

/**
 * Created by dell on 2016/9/8.
 */

import {Component} from 'angular2/core';

@Component({
    selector: 'key-up',template: `
  <input #Box
      (keyup.enter)="values=Box.value"
      (blur)="values=Box.value">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent {
    values='';
    onKey(event:any) {
        this.values += event.target.value + ' | ';
    }
}

/**
 * Created by dell on 2016/9/8.
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'loopback',template: `
   <input #Box (keyup)="0">
   <p>{{Box.value}}</p>
  `
})
export class LoopbackComponent  {

}

/**
 * Created by dell on 2016/9/8.
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'myfocus',template: `
    <p>{{values}}</p>
    <input #Box (focus)="values='请输入您的地址' ">

   `
})
export class FocusComponent {
    values='';
}