【Ionic/サンプル】簡単なカウンターアプリ

Ionicで簡単なカウンターアプリを作成する方法についてまとめました。

## 【サンプル】カウンターアプリ

Ionicで次のような簡単なカウンターアプリを作ってみます。

① ホームテンプレートを次のように編集します。
「タイトル」「数値表示部分」「ボタン」の作成

■src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      簡易カウンター
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <p align="center">{{cnt}}</p>
  </div>
  <ion-buttons>
    <button ion-button block round (click)="add()">▲</button>
    <button ion-button block round (click)="reduce()">▼</button>
    <button ion-button block round (click)="init()">☓</button>
  </ion-buttons>
</ion-content>

②ボタンを押したときに値をカウントする処理を記述します。

■src/pages/home/home.ts

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

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

  public cnt: number = 0;

  constructor(public navCtrl: NavController) {

  }

  add() {
    this.cnt++;
  }

  reduce() {
    this.cnt--;
  }

  init() {
    this.cnt = 0;
  }

}