トッカンソフトウェア

Angular 2 入力項目

今回はAngular2の入力項目をやります。入力した文字をそのまま画面に表示してみます。

前回の作成したものをベースに一部を変更するので、実際動かす場合は、前回のソースも作成して下さい。


テキスト入力イベント

app\app.component.ts

				
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template:
    `<input #hello (keyup)="update(hello.value)" placeholder="ここに何か入力して下さい。" />
     <h1>{{message}}</h1>`
})
export class AppComponent {
  message = "ここに表示されます。";
  update(value: string) {
    this.message = value;
  }
}
			

イベント

イベント 動作
(click) クリックされた
(keyup) キーボタンが押された
(keyup.enter) エンターキーボタンが押された
(blur) フォーカスが外された



実行イメージ
①画面表示時


②文字入力後

ボタンイベント

app\app.component.ts


import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template:
    `<input #hello placeholder="ここに何か入力して下さい。" />
     <button (click)="update(hello.value)">表示</button>
     <h1>{{message}}</h1>`
})
export class AppComponent {
  message = "ここに表示されます。";
  update(value: string) {
    this.message = value;
  }
}

実行イメージ


ページのトップへ戻る