แก้ไขไฟล์ src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform, Events } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = TabsPage;

  constructor(platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    public events: Events) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      events.subscribe('alertmsg', () => {
        alert("Hello!");
      });
    });
  }
}

เรียกใช้ฟังก์ชัน showAlert()
แก้ไขไฟล์ src/pages/home/home.ts

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

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

  constructor(public navCtrl: NavController,
    public events: Events) {

  }

  showAlert() {
    this.events.publish('alertmsg');
  }

}

แก้ไขไฟล์ src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the
    <code>src/pages/</code> directory to add or change tabs, update any existing page or create new pages.
  </p>
  <button (click)="showAlert()" ion-button color="light">Click Me!</button>
</ion-content>

[BOXMOBILEDEV] Ionic 3 EP10 : การใช้ Logout UI และ การใช้ Events