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.
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 need to build a scalable menu for an ionic 2/3 app (preferably using ion-menu). Following the guides on the docs the menu should be a sibling of the main content and they suggest to keep it inside app.html, which is a very high place inside the app that doesn't have to be crowded too much.
If we have a big menu or if we need to use several different menus, triggered by actions inside app, this place is not appropriate for this purpose.
I want to hide the complexity of the menu in it's own container/component and handle the logic outside app.component.ts.
app.html should stay slim and a construction like the one below may be useful.
<app-menu></app-menu> // this should be the enclosing container of the menu logic
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I do this, the following error comes up:
Menu: must have a [content] element to listen for drag events on. Example:
<ion-menu [content]="content"></ion-menu>
<ion-nav #content></ion-nav>
Any thoughts on how to implement this, avoiding to add code directly to app.html and app.component.ts?
Tks
error code just tells you to write <ion-nav #content></ion-nav> if you use <ion-menu [content]="content"></ion-menu>...
example toggle menu code below ...
<ion-header>
<ion-navbar color="danger">
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu">
</ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-menu [content]="content">
<ion-content padding>
this is awkmal
</ion-content>
</ion-menu>
</ion-header>
<ion-nav #content></ion-nav>
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 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 am trying to remove the back button from navigation bar of my pages. Is there any way to do so
Thanks
This is the simplest way to remove back button in Ionic
<ion-navbar hideBackButton *navbar>< /ion-navbar>
<ion-navbar hideBackButton="true">
include this in your ion-navbar .. the back button will be excluded for your current view
To remove the back button on this.navCtrl.push in your app.module.ts file
do this
import { IonicApp, IonicModule } from 'ionic-angular';
#NgModule({
declarations: [ MyApp ],
imports: [
IonicModule.forRoot(MyApp, {
backButtonText:'',
backButtonIcon:''
}, {}
)],
bootstrap: [IonicApp],
entryComponents: [ MyApp ],
providers: []
})
take a look at this link http://ionicframework.com/docs/v2/api/config/Config/
another way is you should use this.navCtrl.setRoot(pagename,{});
One way is to use
ion-toolbar
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
instead of navbar.
Note: User will still be able to go back through the phone back button.
Use the ion-toolbar instead of ion-navbar.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button left menuToggle="MyMenu">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>My Awosome App</ion-title>
</ion-toolbar>
</ion-header>
Better go for $ionicNavBarDelegate
This will helps to configure your backbutton.
http://ionicframework.com/docs/api/service/$ionicNavBarDelegate/