Ionic 2 ActionSheet Example

Want create site? Find Free WordPress Themes and plugins.
Ionic 2 ActionSheet Example

Ionic 2 ActionSheet Example

This Article I’m going to explain, How to create ActionSheet using Ionic Framework -v2.

Goal:

  • Create a button
  • When user pressed button, open action sheet with 2 option
    • Option 1: Access Camera
    • Option 2: Access Gallery
  • Display Output in console

DOWNLOAD SOURCE CODE

STEPS

Create New Ionic 2 Project

ionic start ActionSheet blank --v2

Create a button with click functionality inside src/home.html

<button ion-button (click)="openActionSheet()" class="button">Open Action Sheet</button>

Open src/home.ts

import { Component } from '@angular/core';
import { ActionSheetController } from 'ionic-angular'
@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
export class HomePage {
  constructor(public actionSheetCtrl: ActionSheetController) {
 
  }
openActionSheet(){
 console.log('opening');
 let actionsheet = this.actionSheetCtrl.create({
 title:"Choose Album",
 buttons:[{
 text: 'Camera',
 handler: () => {
 console.log("Camera Clicked");
 }
 },{
 text: 'Gallery',
 handler: function(){
 console.log("Gallery Clicked");
 }
 }]
 });
 actionsheet.present();
}
}

Explanation:

Step 1: You need to import action sheet from ionic-angular

actionSheetCtrl.create() used for creating action sheet, you can pass options like title, button label, a callback function and more. actionsheet.present() used for opening action sheet.

Learn More: http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/

DOWNLOAD SOURCE CODE

Did you find apk for android? You can find new Free Android Games and apps.