Hello All, Today we will see the example of the ACTION SHEET CONTROLLER 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 that 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 commands 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.