What should happen when users click over back button of phone? In case when modal opens.
Registered a back button:
// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
// code that is executed when the user pressed the back button
// and ionic doesn't already know what to do (close modals etc...)
self.modalController.dismiss();
});
The problem with the code:
It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.
This should not happen the page should not pop - only modal should close.
Check the image gif added ->
Click here to see the problem
You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).
Then checking if there is a opened modal with modalController.getTop().
constructor(private modalCtrl: ModalController, private nav: NavController) {
}
ngOnInit() {
this.platform.backButton.subscribeWithPriority(9999, () => {
this.closeModalOrPage();
});
}
async closeModalOrPage(){
let modal = await this.modalCtrl.getTop();
if (modal){
modal.dismiss();
} else {
this.nav.pop();
}
}
Related
I'd like to open a modal in Ionic 5 just opening a page. Without any action, just load the page and hop! you get your modal.
I've been reading the documentation at https://ionicframework.com/docs/api/modal#events but is too cryptic for me. Need some more elaboration...
I´ve fount severals examples out there of opening the modal with a click event, but that's not what I need.
Thanks in advance!
Look into Ionic's lifecycle hooks which let you execute code at different moments during a component's existence. You'll probably want to call a modal creating method inside of the ionViewDiDEnter hook within the component where you want the modal to appear.
Something like this:
export class YourPage {
constructor(public modalController: ModalController) { }
ionViewDidEnter() {
this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
component: YourModalComponent
});
return await modal.present();
}
}
I have a button in my ionic application to open a article from the homepage. I want to enable my users to exit the app by pressing the device back button. But when they are at the article page I want it to just go back to the homepage when pressing the back button.
I created a custom backbutton event to handle the function of exiting the app. It can exit the app from the homepage. However when pressing the back button on the article page, it does not navigate back to the homepage and nothing happens. How can I make it goes back to the homepage from the article page when pressing the back button?
In app.component.ts
this.platform.backButton.subscribeWithPriority(99, async () => {
if (this.routerOutlet && this.routerOutlet.canGoBack()) {
this.routerOutlet.pop();
} else if (this.router.url === '/home') {
navigator['app'].exitApp();
}
});
I noticed that this.routerOutlet.canGoBack returns false when firing the event from the article page, so the routerOutlet.pop() is not fired. Not sure if this is to do with how I open the article page?
This is how i open the article page
viewArticle(articleId) {
let navigationExtras: NavigationExtras = {
state: {
articleId: articleId
}
};
this.navController.navigateForward(['/article'], navigationExtras);
}
I have a problem where when I call this.viewCtrl.dismiss(); and this.navCtrl.push(HomePage); in my function, the tabs at the bottom of the page disappear
So I have 3 pages/modal:
page1: home page, page2: modal, page3: second page
I navigate from my home page to the modal which has two actions(accept or reject)
If the user accepts then go to the second page, if the use rejects then go back to the home page. When the user accepts everything works as expected however if the user rejects then the app hides the tabs at the bottom of the page
My code for the reject button navigation is as follows
Modal page
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
Second page
calling modal in constructor
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage) {
let myModal = this.modalCtrl.create(modal);
myModal.present();
}
My TabsPage is default as per Ionics Tabs Layout App
You don't need to push the homepage from the modal since, you said, you are going back to homepage.
Change in modal.ts
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
to
accepted: boolean;
....
accept(){
this.accepted = true;
this.dismiss();
}
reject(){
this.accepted = false;
this.dismiss();
}
dismiss(){
this.viewCtrl.dismiss(this.accepted);
}
Call the accept() when accepted and reject() when rejected
Handle your actions after dismissing view by
let myModal = this.modalCtrl.create(modal);
myModal.onDidDismiss( accepted => {
// your actions here
console.log(accepted);
if(accepted){
this.navCtrl.push(SecondPage);
}
});
myModal.present();
I created an example here on stackblitz
I am working in ionic when i install application in android device the hardware back button was not working, after some R & D i got solution to register back button i have done it. but my problem is when select option popover is open and i press back button then it dismiss the popover that's OK but when i want to reopen select option after pressing hardware back button i'm unable to open it. registering back button uses some condition to check active portals and dismiss the active portal if any found. but it does not allow to open select option again. can anyone help me to solve this issue? my code is below...
platform.ready().then(() => {
// this.config.pullVersion();
let ready = true;
// to handle hardware back button in android
platform.registerBackButtonAction(() => {
console.log("Back button action called");
let activePortal = ionicApp._loadingPortal.getActive() ||
ionicApp._modalPortal.getActive() ||
ionicApp._toastPortal.getActive() ||
ionicApp._overlayPortal.getActive();
let view = this.navCtrl.getActive();
if (activePortal) {
ready = false;
activePortal.dismiss();
activePortal.onDidDismiss(() => { ready = true; });
console.log("handled with portal");
return;
}
if (menuCtrl.isOpen()) {
menuCtrl.close();
console.log("closing menu");
return;
}
if (this.navCtrl.canGoBack()) {
this.navCtrl.pop();
console.log("poping back");
return;
} else {
console.log("exiting from app");
platform.exitApp();
console.log("poping back");
}
}, 1);
});
and select-option
<ion-select interface="popover" [disabled]="isStarted" [(ngModel)]="routeName" class="custom-option-btn" (ionChange)="optionsFn();">
<ion-option value="" selected disabled>select Route</ion-option>
<ion-option *ngFor="let cg of routeData;let idx = index" [value]="cg">{{cg.routeName}} </ion-option>
</ion-select>
this got dismissed in back button event and does not open select option again
ionicApp._overlayPortal.getActive()
I've been searching a lot about this topic, and Ionic Team hasn't developed a solution for this yet (I know it's been 3 years now). It seems that the only way we have to dismiss an ion-select is by using the 'cancel' button inside the selector.
Any other way, using platform.backbutton, or anything in IonicApp module won't let you do what you need.
The only real solution i can think about is creating a new Modal, only for the select, and implement your own scroll and selectable items, and then use ModalController.dismiss() to dismiss the select, as if you were pressing cancel inside the ion-select.
I need to override the back button function for both buttons:
the back icon on top left corner of nav-bar
the hardware back button (for example in android)
but only for one specific view, not globally. How can i do that?
It is possible to override the back button functionality for both buttons from within your controller. Here is the code for that:
// run this function when either hard or soft back button is pressed
var doCustomBack = function() {
console.log("custom BACK");
};
// override soft back
// framework calls $rootScope.$ionicGoBack when soft back button is pressed
var oldSoftBack = $rootScope.$ionicGoBack;
$rootScope.$ionicGoBack = function() {
doCustomBack();
};
var deregisterSoftBack = function() {
$rootScope.$ionicGoBack = oldSoftBack;
};
// override hard back
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterHardBack = $ionicPlatform.registerBackButtonAction(
doCustomBack, 101
);
// cancel custom back behaviour
$scope.$on('$destroy', function() {
deregisterHardBack();
deregisterSoftBack();
});
Make sure to inject $rootScope into the controller.
For more details and a proper explanation, see my full answer at related question:
Ionic override all BACK button behaviour for specific controller
This code is for android button, while the button on the navigation bar is a bit more simple:
Android button :
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="home"){
alert("button back");
}
}, 100);
Ionic button :
You can edit your topic and see how you have defined your menus and your views?