I have implemented tabs on a modal.
Here is the code:
Pagewithmodal.ts
getFoodInfo(food) {
let foodModal = this.modalCtrl.create('TabspagePage', { Model: food, Api: this.api, Title: 'Food Infopedia' });
foodModal.onDidDismiss(option => {
console.log(option);
});
foodModal.present();
}
TabspagePage.html
<ion-tabs>
<ion-tab tabIcon="heart" [root]="tabNutri" tabTitle="Nutritional" [rootParams]="model"></ion-tab>
<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
</ion-tabs>
TabspagePage.ts
this.tabIngre = 'IngreinfoPage';
this.tabNutri = 'FoodinfoPage';
this.model = { 'Api': navParams.data.Api, 'Model': navParams.data.Model };
IngreinfoPage.html
<ion-header>
<ion-navbar color="header">
<ion-title>Food Infopedia</ion-title>
<ion-buttons end>
<button ion-button color="light" clear icon-only (click)="dismiss()">
<ion-icon name='close' is-active="true"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
IngreinfoPage.ts
dismiss() {
this.viewCtrl.dismiss();
}
When I click the close button, dismiss() function is called, and i'm getting an error Runtime Error
Uncaught (in promise): navigation stack needs at least one root page
<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
This will create a new nav stack with root page as your modal page: IngreinfoPage.
And when you dismiss from IngreinfoPage,it will remove only IngreinfoPage and the stack will have no root page.
If you want to dismiss the tabs modal, you will have to dismiss from the TabspagePage i.e. create a dismiss function in TabsPagePage and maybe use Events API to call the function on close.
Related
I have the following Tabs configured in my project:
tabs.html
<ion-tabs tabsPlacement="bottom" [selectedIndex]="0">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="pulse"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information"></ion-tab>
</ion-tabs>
When in the "Home" page (tab1Root), there is a button to change the Root Page to a "Home v2" page.
home.html
<ion-content class="has-header" padding>
<div padding style="text-align: center;">
<h1>Home v1</h1>
<ion-button button (click)="setRootTab1ToHome2()">
Set Root of TAB1 to Home v2
</ion-button>
</div>
</ion-content>
home.ts
import { NavController } from 'ionic-angular/index';
import { Home2Page } from 'home2.ts'
import { Component } from "#angular/core";
#Component({
templateUrl:"home.html"
})
export class HomePage {
constructor(private nav: NavController) {
}
setRootTab1ToHome2() {
this.nav.setRoot(Home2Page);
}
}
If the TAB1 root page is changed by clicking the available button and then I change to the TAB "About" and change back to the TAB "Home", I will see the Page "Home v2" instead of "Home".
BUT, if I click twice on the TAB "Home" it will get back to Page "Home".
How can I restore TAB "Home" root Page to "Home v1" instead of "Home v2" when changing from Tab to Tab? Like the behavior of clicking twice on TAB "Home", but with 1 click only.
Please check the project in the Plunker:
https://plnkr.co/F5hAvypKxb9mhQDm3SDw
I have this case where navigating by a [nav-push] from a ion-item to a details page, on the details page ionViewWillEnter is not invoked, while the ngOnInit does.
//ion-item on list page...
<button ion-item detail-push
*ngFor="let recipe of recipes"
[navPush]="recipeEditPage"
[navParams]="{recipe:recipe}">
<h2>{{recipe.title}}</h2>
</button>
//details page, ionWillEnter doesn't fire, white ngOnInit does.
ngOnInit(){
if(this.navParams.data.recipe){
this._mode = RecipeEditPage.Modes.EDIT;
this._recipe=this.navParams.data.recipe;
}
else
this._recipe = this.recipeSrv.getNewRecipe();
}
Thanks! F.
I created a page with 3 tabs using ionic 2.Inside one page I created one button and on click of that button I navigate to a new child page by executing
the push command but whenever I am clicking the tab containing the child page I am not able to see the root page instead I see the new child page.
I want to see the root page on revisit of the tab page.
Below is my code.. here you can check in about.html i have placed one button to navigate to a child page.Navigation is happening but once I navigate then I am not able to see the about tab page without clicking on back button
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
tabs.ts
import { Component } from '#angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
constructor() {
}
}
abuot.html
<ion-header>
<ion-navbar>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="navigate()" ion-button color="secondary">GO to LIst</button>
<!-- <button [navPush]="listPage" ion-button color="secondary">Go To About</button> -->
<!-- <button ion-button color="secondary">Secondary</button> -->
</ion-content>
about.ts
import { Component } from '#angular/core';
import {ListPage} from '../list/list';
import {ViewController, NavController} from 'ionic-angular';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,public viewctr: ViewController) {
}
navigate(){
this.navCtrl.push(ListPage);
}
}
Just a stab in the dark since we cannot see any of your code (which should be an addition to any question on here). You could try using .setRoot() to get to the root page you're wanting.
import { NavController } from 'ionic-angular';
import { NameOfPage } from '../NameOfPage';
pageYouWant: any = NameOfPage;
constructor(public navctrl: NavController){}
onClickFunction(){
this.navCtrl.setRoot(pageYouWant)
}
I'm struggling with putting a map on a second segment. It's a typical problem, and I've found several solutions, but they don't work for me because the events seem to get fired before the segment is build completely. I don't know if this is because of a breaking change in Ionic, or because I am doing it wrong.
page.html:
<ion-toolbar>
<ion-segment [(ngModel)]="view" (ionChange)="changeSegment()">
<ion-segment-button value="list">
<ion-icon name="list-box" isActive="false"></ion-icon>
</ion-segment-button>
<ion-segment-button value="map" (ionSelect)="selectMap()">
<ion-icon name="map" isActive="false"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-content [ngSwitch]="view">
<div *ngSwitchCase="'list'"></div>
<div *ngSwitchCase="'map'">
<div id='map'>Here the map comes.</div>
</div>
</ion-content>
page.js:
import {Component} from "#angular/core";
#Component({
templateUrl: 'build/pages/page/page.html'
})
export class Timeline {
constructor() {
this.view = "list";
this.selectMap = function() {
console.log("selectMap:", document.getElementById("map"));
}
this.changeSegment = function() {
console.log("changeSegment:", document.getElementById("map"));
}
}
}
(Yeah, that project is using JavaScript, not TypeScript.)
With both the change and the select events, on first click they return "null" for the map element, and only on a second click they return the correct element.
To me it looks like the events are fired before the segment is complete. (But I may just as well be making a stupid beginners mistake...)
How do I know when the #map element is available?
The Problem
I push the Root Page to Page2 that supports a side menu, the issue is that when it opens Page2 it shows the back button and hides the menu button for that I've tried to add hideBackButton to Page2 in order to see the menu button but I both the back button and menu button disappeared!
Here is my current code:
<ion-navbar hideBackButton>
<button menuToggle start>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
The expected behavior should be:
Should hide the back button, and show the menu button.
Ionic Version:
Ionic2
You can't do that following that way; however what you can do is to do a setRoot instead of pushing from the root to Page2
You can use following instead of your code:
<ion-toolbar hideBackButton>
<button menuToggle start>
<ion-icon name="menu"></ion-icon>
</button>
</ion-toolbar>
If you don't want to allow the "back" action on your Page2, and since you face a problem hiding the button, why not removing your root page from the history stack before accessing your Page2?
In such a case, the "back" action not gonna be allowed and the "back" button not gonna be displayed too.
About how to remove a page from the history stack before pushing another page, you could have a look at:
Remove a view from the back history - Ionic2