IONIC V3 | ACTION SHEET CONTROLLER | IONIC BASICS

Share the post
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.

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.

Leave a Comment