【Ionic】ボタンとイベントハンドラの作成

Ionicでボタンとイベントハンドラを作成する方法についてまとめました。

## 【ボタン】新規作成

① ボタンを設置したいページテンプレート（ホーム画面ならsrc/pages/home/home.html）を開きます。

② ion-contentに設置するボタンの数だけbuttonタグを記述します。

■デフォルトのデザインの場合

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button>Button Name1</button>
</ion-content>

③ ボタンのデザインを変更したい場合、様々な属性を設定します。

■赤色の角丸ボタン

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button>Button 1</button>
  <button ion-button red round>Button 2 - block</button>
  <button ion-button round>Button 3 - round</button>
</ion-content>

## 【ボタン】イベントハンドラの設定

続いて、作成したボタンを押したときの動作（イベントハンドラ）を作成します。
まず、bottonタグ内に「(click)="onClick()」属性を追加します。

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="onButton1Click()">ボタンの名前1</button>
</ion-content>

② home.tsで先程記述した呼び出す関数（onButton1Click）を実装します。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }

  onButton1Click(){
    console.log("ボタンがクリックされました(^^)");
  }

}

② ボタンを押すと、コンソールに文字列「ボタンがクリックされました(^^)」が表示されます。