Hello All,
Today we will see the example of the action sheet in ionic 3. We will see How the Action Sheet in ionic will work & How to handle buttons while clicking on Action Sheet.
What is Action Sheet?
Action Sheet is nothing but a list of options pop up on the screen. It can slide up from the bottom of the page & display above the component.
Table of Contents
How to implement Action Sheet in Ionic 3?
Follow the below steps to implement the Action Sheet in Ionic 3
1.Genereate a new page by using the command :
To demonstrate the same we will create a new page by adding the following command :
ionic g page actionsheet-example
you can see here what are the different types of the command used to Generate ionic pages, components & pipes.
2.Add dependency of action sheet module & import the page we have just created in step 1.
import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘../pages/home/home’;
import { TabsPage } from ‘../pages/tabs/tabs’;
import { QrscannerPage } from ‘../pages/qrscanner/qrscanner’;
import { LocalNotificationPage } from ‘../pages/local-notification/local-notification’;
import { GeolocationPage } from ‘../pages/geolocation/geolocation’;
import { InappbrowserPage } from ‘../pages/inappbrowser/inappbrowser’;
import { SocialSharingPage } from ‘../pages/social-sharing/social-sharing’;
import { FormExamplePage } from ‘../pages/form-example/form-example’;
import { StorageExamplePage } from ‘../pages/storage-example/storage-example’;
import { ActionsheetExamplePage } from ‘../pages/actionsheet-example/actionsheet-example’;
import { ModalPage } from ‘../pages/modal/modal’;
import { LoginPage } from ‘../pages/login/login’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { LocalNotifications } from ‘@ionic-native/local-notifications’;
import { Geolocation } from ‘@ionic-native/geolocation’;
import { InAppBrowser } from ‘@ionic-native/in-app-browser’;
import { SocialSharing } from ‘@ionic-native/social-sharing’;
import { RestProvider } from ‘../providers/rest/rest’;
import { HttpClientModule } from “@angular/common/http”;
import { CommonProvider } from ‘../providers/common/common’;
import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner’;
import { IonicStorageModule } from ‘@ionic/storage’;
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage,
GeolocationPage,
InappbrowserPage,
SocialSharingPage,
FormExamplePage,
StorageExamplePage,
ActionsheetExamplePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage,
GeolocationPage,
InappbrowserPage,
SocialSharingPage,
FormExamplePage,
StorageExamplePage,
ActionsheetExamplePage
],
providers: [
StatusBar,
SplashScreen,
LocalNotifications,
Geolocation,
InAppBrowser,
SocialSharing,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
RestProvider,
CommonProvider,
QRScanner
]
})
export class AppModule { }
3.Write Menu to display our example page (Optional step) in app.component.ts :
import { Component, ViewChild } from ‘@angular/core’;
import { Nav, Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { HomePage } from ‘../pages/home/home’;
import { LoginPage } from “../pages/login/login”;
import { TabsPage } from “../pages/tabs/tabs”;
import { QrscannerPage } from ‘../pages/qrscanner/qrscanner’;
import { LocalNotificationPage } from ‘../pages/local-notification/local-notification’;
import { GeolocationPage } from ‘../pages/geolocation/geolocation’;
import { InappbrowserPage } from ‘../pages/inappbrowser/inappbrowser’;
import { SocialSharingPage } from ‘../pages/social-sharing/social-sharing’;
import { FormExamplePage } from ‘../pages/form-example/form-example’;
import { StorageExamplePage } from ‘../pages/storage-example/storage-example’;
import { ActionsheetExamplePage } from ‘../pages/actionsheet-example/actionsheet-example’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = LoginPage;
pages: Array<{ title: string, component: any }>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: ‘Home’, component: HomePage },
{ title: ‘Tabs’, component: TabsPage },
{
title: ‘QR Scanner’, component: QrscannerPage
},
{ title: ‘Local Notification’, component: LocalNotificationPage },
{ title: ‘Geolocation’, component: GeolocationPage },
{ title: ‘In App Browser’, component: InappbrowserPage },
{ title: ‘Social Share’, component: SocialSharingPage },
{ title: ‘Form Validation’, component: FormExamplePage },
{ title: ‘Storage Example’, component: StorageExamplePage },
{ title: ‘Action Sheet Example’, component: ActionsheetExamplePage }
];
}
initializeApp() {
this.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.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn’t want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
4. Write an HTML:
<!–
Generated template for the ActionsheetExamplePage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
–>
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name=”menu”></ion-icon>
</button>
<ion-title>ActionSheet Examples</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<button ion-button full (click)=”openActionSheet();”>Open ActionSheet</button>
</ion-item>
</ion-content>
5. Write actionsheet-example.ts
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { ActionSheetController } from ‘ionic-angular’;
/**
* Generated class for the ActionsheetExamplePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: ‘page-actionsheet-example’,
templateUrl: ‘actionsheet-example.html’,
})
export class ActionsheetExamplePage {
constructor(public navCtrl: NavController, public navParams: NavParams, private actionSht: ActionSheetController) {
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad ActionsheetExamplePage’);
}
openActionSheet() {
const actionSheet = this.actionSht.create({
title: ‘Do you want to delete this document ?’,
buttons: [
{
text: ‘NO’,
role: ‘destructive’,
handler: () => {
console.log(‘Destructive clicked’);
}
}, {
text: ‘YES’,
handler: () => {
console.log(‘yes clicked’);
}
}, {
text: ‘Cancel’,
role: ‘cancel’,
handler: () => {
console.log(‘Cancel clicked’);
}
}
]
});
actionSheet.present();
}
}
As in the output, we can clearly see the three options coming nicely from the bottom of the page on the screen & we can handle all clicks as shown in the above code.
