[Solved] Show alert, action sheets in Ionic v2

Ionic starter https://github.com/nhancv1992/hello-ionic2

"dependencies": {
"angular2": "2.0.0-beta.6",
"es6-promise": "3.0.2",
"es6-shim": "0.33.13",
"ionic-angular": "2.0.0-beta.3",
"ionic-native": "^1.1.0",
"ionicons": "3.0.0-alpha.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.14"
},

In alert.js

import {Page, Alert, ActionSheet, NavController} from 'ionic-angular';

@Page({
templateUrl: 'build/pages/alert/alert.html'
})
export class AlertPage {
static get parameters() {
return [[NavController]];
}


constructor(nav) {
this.nav = nav;
}


showAlert() {
let alert = Alert.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
this.nav.present(alert);
}

actionSheet() {
let actionSheet = ActionSheet.create({
title: 'Modify your album',
buttons: [
{
text: 'Destructive',
style: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
}, {
text: 'Archive',
handler: () => {
console.log('Archive clicked');
}
}, {
text: 'Cancel',
style: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
this.nav.present(actionSheet);
}
}

In alert.html

<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Alert</ion-title>
</ion-navbar>


<ion-content padding class="getting-started">
<p>
<button primary menuToggle>Toggle Menu</button>
<button block (click)="showAlert()">Alert Example</button>
<button block (click)="actionSheet()">Action Sheet Example</button>
</p>

</ion-content>

Result:

Show Alert
Show action sheets
Show your support

Clapping shows how much you appreciated Nhan Cao’s story.