Part 14 how to use actionsheet controller in ionic

in this video, i will show you that how you can create actionSheet UI components in your ionic application.

Action Sheets slide up from the bottom edge of the device screen, and display a set of options with the ability to confirm or cancel an action. Action Sheets can sometimes be used as an alternative to menus, however, they should not be used for navigation.

The Action Sheet always appears above any other components on the page, and must be dismissed in order to interact with the underlying content. When it is triggered, the rest of the page darkens to give more focus to the Action Sheet options.



to create action sheet

import this library

import { ActionSheetController } from 'ionic-angular';

in constructor create instance

constructor(public actionSheetCtrl: ActionSheetController) { }


then create a method  after constructor

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


then create button to call this method


<button ion-button (click)="presentActionSheet">click me</button>



====================================================

to download full source code and presentation visit our wesite and Blog



website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA