Tuesday, 23 May 2017

How to Implement Action Sheet in ionic 2 with ActionSheet Controller .

Action Sheet in ionic framework is a dialog that lets the user choose from a set of options. It appears on top of the app's content, and must be manually dismissed by the user.
actionsheetionic2

Copy and pase the below ts code to your components ts file.

import { Component } from '@angular/core';
import { ActionSheetController } from 'ionic-angular'
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {

constructor(public navCtrl: NavController,public actionSheetCtrl: ActionSheetController) {

}
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Image Via',
buttons: [
{
text: 'Gallery',
handler: () => {
console.log('Gallery clicked');
}
},
{
text: 'Camera',
handler: () => {
console.log('Camera clicked');
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});

actionSheet.present();
}
}

Now for the html part, just add the following html code to your components html file.

Copy and pase the below code to your components html file.

<ion-content>
  <button ion-button full (click)="presentActionSheet()">Pick Image</button>
</ion-content>

0 comments:

Post a Comment