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)
}
Related
I implemented a tabs with side menu interface as seen on https://www.djamware.com/post/587d543080aca723c115beaf/how-to-mixing-side-menu-and-tabs-in-ionic-2. Things are working well as it was inteded from the tutorial except for an issue. Take this example:
User is on Tab1.
User decides to navigate to Tab2, clicks Tab2.
User wants to navigate BACK to Tab1, clicks previous button on Chrome.
ISSUE: User is not able to navigate back when previous/back button is clicked, instead the url changes but the active Tab does not.
Back button works for all pages except on tabbed pages.
tabs.html
<ion-tabs [selectedIndex]="myIndex">
<ion-tab tabIcon="home" [root]="tab1Root" tabTitle="Home"></ion-tab>
<ion-tab tabIcon="timer" [root]="tab2Root" tabTitle="Schedules"></ion-tab>
<ion-tab tabIcon="briefcase" [root]="tab3Root" tabTitle="Cases"></ion-tab>
tabs.ts
#IonicPage()
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
tab1Root= 'HomePage';
tab2Root= 'SchedulePage';
tab3Root= 'CasesPage';
myIndex: number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}
The repo I am working on is at https://github.com/jjjhanreyyy/Prosecutor-App
From
#IonicPage()
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
change it to
#IonicPage({
segment: 'page-tabs'
})
#Component({
templateUrl: 'tabs.html'
})
This is derived from this Github repo.
I am trying to push new pages inside the current page's <div> element. I have tried various methods found on SO but nothing worked for me. I have this code right now which doesn't work.
<ion-content padding>
<div #pageView>
</div>
</ion-content>
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams, PopoverController } from 'ionic-angular';
export class Vehiclemaintenance {
#ViewChild('pageView') nav: NavController
Constructor(public navCtrl: NavController){}
loadPage(){
this.nav.push(myComponent)
}
}
This causes an error
ERROR TypeError: _this.nav.push is not a function
Where am I going wrong!
* Update that worked *
Instead of using a <div> element I used <ion-nav>
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 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
ion-tabs and ion-content overlaps ion-header when i load an image in the header, it only happens the first time i'm visiting the page, after that it loads well.
this is the component
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
public image: string;
appName = 'Ionic App';
constructor(public navController: NavController) { }
ionViewDidLoad(){
this.image = "https://source.unsplash.com/640x300/?technology"
}
}
Here is the html
<ion-header>
<ion-navbar>
<ion-title></ion-title>
</ion-navbar>
<img class="cabecera" [src]="image" width="100%">
</ion-header>
<ion-content padding class="contenido">
Welcome to this <ion-icon name="ionic"></ion-icon> <b>Ionic 2 app</b>.
</ion-content>
Its posible to view an example in this plunker
https://plnkr.co/edit/CpBXmn?p=preview
The problem is that you are only loading the image (in the ionViewDidLoad function) after the rest of the content is loaded. After loading the image you need to resize the content, as described in this issue.
Add ViewChild and Content to your imports from #angular/core and ionic-angular, respectively:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
Use #ViewChild to select the class for the ion-content component:
// ...
export class HomePage {
#ViewChild(Content) content: Content;
// ...
Then, once the image is loaded, call the resize method on content:
this.content.resize();