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
Related
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();
}
}
I want to know which function is called when we click ion-navbar back button by default in ionic 3.
I want to call the same function on hardware back button click.
You can use registerBackButtonAction of Platform Service.
You can override hardware back button action as below inside app.component.ts.
Remember to call registerBackButtonAction after Platform.ready().
import { Platform, App } from 'ionic-angular';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(public platform: Platform, private app: App) {
this.platform.ready().then(() => {
this.platform.registerBackButtonAction(() => {
let nav = this.app.getActiveNav()
if (nav.canGoBack()) {
// If there are pages in navigation stack go one page back
// You can change this according to your requirement
nav.pop();
} else {
// If there are no pages in navigation stack you can show a message to app user
console.log("You cannot go back");
// Or else you can exit from the app
this.platform.exitApp();
}
});
});
}
}
Hope this will help you.
In my app I have 3 tabs. In the first tab there is a list that pushes to another page (inside the same tab, so the tabs remain at the bottom). When I switch to another tab, and I go back then to the first tab I am still at that subpage.
Is there a way to go always to the root. The problem is that inside the child-page I have also links, so the solution on Ionic 2 - How do I get back to the start page of a given tab did not work for me, as he redirects me also to the root when I click open a new page in the child.
Any other solutions?
I'm not sure if this would be the best way to fix that, but it should work. Suppose this is the page that contains all the tabs:
<ion-tabs>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(0)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(1)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(2)" tabTitle="First tab"></ion-tab>
</ion-tabs>
And in the component code:
import { Events } from 'ionic-angular';
// ...
constructor(public events: Events) {}
public onSelected(index: number): void {
if(index) this.events.publish('TabSelected');
}
So basically, we're publishing an event when the user selects any tab other than the first tab (index equal to 0).
The in the FirstTab, we can subscribe to that event, and use this.navCtrl.popToRoot() to close the opened pages inside of that tab:
// FirstTabCode
import { NavController, Events } from 'ionic-angular';
// ...
constructor(public navCtrl: NavController, public events: Events) {
this.events.subscribe('TabSelected', () => { this.navCtrl.popToRoot(); });
}
ngOnDestroy() {
this.events.unsubscribe('TabSelected');
}
I am trying various solutions from Google but all of them seems to be for Ionic 1 and other versions of Ionic and Angular.
HTML
<button class="edit" (click)="goBackToEnhancementPage();">Edit</button>
On button click I want to goto to the previous state in the history
TypeScript
This is the current state
export class BookingConfirmationPage {
//Some properties
constructor(public navCtrl: NavController, public navParams: NavParams ) {
//Some codes
}
goBackToEnhancementPage(){
canGoBack();
}
}
Previous State
export class BookingEnhancementPage {
//Some code
constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController, private formBuilder: FormBuilder ) {
//This is previous state
}
}
This doesn't work. Please advise what am I doing wrong?
I'm guessing from your question you are trying to use navController to go back to your previous state, aka "back" function.
The way ionic navigation works is like a stack, new pages will be pushed to the top of the stack via "push" via pages will be removed from the top of the stack via "pop"
To go back to your previous state, u can use :
this.navCtrl.pop();
But before that make sure you have push your previous page into navController or you have setRoot your "BookingConfirmationPage" page.
You might want to read up on : https://ionicframework.com/docs/v2/api/navigation/NavController/
If you want your previous details in BookingEnhancementPage to be filled with your user's previously entered data, you might want to use a combination of localstorage and onPageBeforeEnter/onPageWillEnter to populate the fields.
I am using tabbed view in my Ionic 2 RC0 App. When I do this.nav.push the new page is getting opened in the tab instead of opening as a new page? What am I doing wrong here?
export class Tab1Page {
constructor(public nav: NavController) {
}
editRecord(index){
this.nav.push(MyCustomPage, {indexoEdit: index});
}
}
If you do not want to see tabs when navigating to a subpage then set tabsHideOnSubPages to true in your config. See the docs below:
https://ionicframework.com/docs/v2/api/config/Config/
You can try in this way
constructor(public nav: NavController,private app: App) {
}
editRecord(index){
this.app.getRootNav().push(MyCustomPage, {indexoEdit: index});
}