Angular, Blockchain, Science とか

Angular, Blockchain, Science全般 の情報を主に書いていきます。

【4】Angular v4 User Input イベント

ここでは、Angularでの User Input のイベントをまとめてみます。
Angular CLI で環境構築して、src/app/app.component.ts のところを書き換えれば普通に動作するはずです。

クリック

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClickMe()">Click!!</button>

    {{clickMessage}}
    `,
})
export class AppComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = 'Angular is awesome';
  }
}

(click) でボタンをクリックしたときのイベントを操作できます。非常に簡単ですね。(click)は覚えましょう。

Input $event

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input (keyup)="onKey($event)">
    <p>{{values}}</p>
    `,
})
export class AppComponent {
  values = '';

  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

event.target.valueで入力したデータを取得できます。

まあこんな感じで簡単に操作できていいですね。