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
Related
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.
i am trying to set icons on the side navigation panel of an ionic2 application, Please suggest how would i get this done?
Here is my code :
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = MysplashPage;
private dashboardpage;
private gradesubjectpage;
private myhomepage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
this.pages = [
{ title: 'Explore', component: HomePage },
{ title: 'Dashboard', component: DashboardPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
// this.splashScreen.hide();
});
}
openPage(pages) {
if(pages.component == HomePage){
this.nav.setRoot(HomePage);
} else {
this.nav.push(pages.component);
}
}
}
Here on the html page i am going to display it with the help of loop, where should i use the different icons for the menu items in the side navigation panel.
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<b>{{p.title}}</b>
</button>
</ion-list>
You'll add an icon like in every list, in this case since the list content is coming from a variable and used in ng-for you'll declare the icon in your object.
app.component.ts:
this.pages = [
{ title: 'Explore', component: HomePage, icon: 'home' }, //OR THE ICON YOU WANT
{ title: 'Dashboard', component: DashboardPage, icon: 'clipboard' }
];
}
And in your HTML:
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<b>{{p.title}}</b> <ion-icon item-right name="{{p.icon}}"></ion-icon>
<!-- item-right attribute on ion-icon will push the icon to the for right -->
</button>
</ion-list>
Check here for all the available icons.
Hope this helps
I have already search lots to find solution, but no luck.
I need to redirect on different page when click on tab
My code:
in app.html
<ion-footer>
<ion-toolbar>
<ion-tabs>
<ion-tab tabIcon="md-home" [root]="rootPage" tabTitle="Home"></ion-tab>
<ion-tab tabIcon="md-person" [root]="profilePage" tabTitle="Profile"></ion-tab>
<ion-tab tabIcon="md-notifications" [root]="updatePage" tabTitle="Updates"></ion-tab>
</ion-tabs>
</ion-toolbar>
</ion-footer>
in app.component.ts
rootPage: any = HomePage;
profilePage: any = ProfilePage;
updatePage: any = UpdatePage;
When i click on Home it's call homepage constructor, but did not redirect to home page.
suppose i'm on cart page and click on homepage Tab. it's call homepage constructor but page remains same.
Please help me. I'm ne in IONIC2
You may try to add the pages to app.modules.ts
entryComponents: [
MyApp,
HomePage,
rootPage,profilePage,updatePage
],
and try to move the ion-tabs as root element, or inside ion-content
<ion-content padding>
<ion-tabs tabbarPlacement="top">
<ion-tab tabIcon="md-home" [root]="rootPage" tabTitle="Home"></ion-tab>
<ion-tab tabIcon="md-person" [root]="profilePage" tabTitle="Profile"></ion-tab>
<ion-tab tabIcon="md-notifications" [root]="updatePage" tabTitle="Updates"></ion-tab>
</ion-tabs>
</ion-content>
change to tabbarPlacement attribute if you wish to place the control in the bottom.
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 have three tabs as follows:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="goToPreviousPage()" tabTitle="Back" tabIcon="arrow-back"></ion-tab>
<ion-tab [root]="tab3Root" (ionSelect)="goToNextPage()" tabTitle="Next" tabIcon="arrow-forward"></ion-tab>
</ion-tabs>
So tab 1 loads the main content and the other two tabs are for navigating the app. Here is the tabs component:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any;
tab3Root: any;
navCtrl;
constructor(navCtrl: NavController) {
this.navCtrl = navCtrl;
}
goToPreviousPage(){
// Need logic to navigate back in history for Tab 1
}
goToNextPage(){
//Logic to navigate forward in Tab 1 content
}
}
Is there a way to get the NavController for Tab1 so as to navigate it's history, or is there a way to get component for tab 1, so as to call methods defined within it?
What you are trying to do is not really what the tab layout is intended for. When using tabs, each tab has it's own history stack. But in your case, you only seem to use one history stack and want to navigate forward and backwards on that. So my suggestion would be to instead not use the tab navigation, but just one page and then put a tab-bar into the footer of the page. Then you can assign (click) methods to the tabs.
However, I'm not sure if this is good design. I have never seen an app that used this kind of tab-navigaton. People will expect the default tab behaviour and will be confused when it behaves otherwise. What are you trying to do exactly? What is the workflow of your app?
I would start with a new, blank project and start from there. ionic start myApp blank --v2 Maybe you could also use a side menu for navigating to different parts of your app.