i have checked various other question related to this but non was answered, So I am writing back this.
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabIcon="ios-add"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="ios-alarm"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="ios-albums"></ion-tab>
<ion-tab [root]="tab4Root" tabIcon="ios-alert"></ion-tab>
</ion-tabs>
tabs.ts
// all imports are done.
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = AlarmPage;
tab2Root = AddPage;
tab3Root = AlbumsPage;
tab4Root = AlertPage;
constructor() {
}
alert-page.ts
//all imports are made
// syntaxes are done correctly
export class AlertPage {
constructor(navCtrl: NavController){}
gotToOtherPage(){
this.navCtrl.push(OtherPage);
}
}
other-page.ts
//When I navigate to other page from the above mentioned pages the tabs does not displayed on the OtherPage.
No need of following function to navigate to tabs page
gotToOtherPage(){
this.navCtrl.push(OtherPage);
}
Just remover it. This code work fine. But you have to include your added page in app.module.ts also
I have done a sample project for you here is the link:
TabsPage
Here I have added a page called detail page. Check this out
Related
I am building an app using the tabbed template in Ionic. It has 4 buttons. .
When the user is logged out, the 4th button should take them to the login/registration page as above.
When they are logged in, it should show a logout button as shown above.
Below is my code in tabs.html showing my tabs:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="List Providers" tabIcon="list"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Login/Register" tabIcon="finger-print" *ngIf="loggedIn"></ion-tab>
<ion-tab tabTitle="Logout" tabIcon="exit" (click)="logout()" *ngIf="!loggedIn"></ion-tab>
</ion-tabs>
When I test out this arrangement by manually setting the value of the boolean variable loggedIn in tabs.ts, it works as expected.
What I want is for the tabs to switch automatically, depending on whether or not the user is logged in. When a user successfully logs in, I am setting a value loggedIn in local storage to true. I then have the code below in my tabs.ts which should toggle the login/logout buttons:
loggedIn: boolean = false;
ionViewWillEnter(): void {
if (localStorage.getItem('loggedIn') == 'true') {
this.loggedIn = true;
console.log("we are logged in!");
} else {
this.loggedIn = false;
console.log("we are logged out");
}
}
The problem however, is that though the value of the variable loggedIn is being set and changed correctly, the view in tabs.html is not updating to then show the logout button, it still shows the login/register button. How can i get the tab to refresh each time it a button is clicked? I have tried adding code to the ionViewWillEnter() function but it did not work. Any help will be greatly appreciated!
My system:
$ ionic info
Ionic:
ionic (Ionic CLI) : 4.0.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0
System:
Android SDK Tools : 26.1.1
NodeJS : v8.10.0 (/usr/bin/node)
npm : 3.5.2
OS : Linux 4.15
Environment:
ANDROID_HOME : /home/user/Android/Sdk
The problem is that you are using a local event of tabs ionViewWillEnter(), so it only will get the value once, i suggest you to create a external provider and use that provider var to set the state of your tabs, changing the value of the var in the provider when you change your state to loggedIn/Off.
import { GlobalProvider } from "../../providers/globals"
constructor(
public global: GlobalProvider,
){
if(!this.global.loggedIn)this.global.loggedIn=false;
}
in the provider
#Injectable()
export class GlobalProvider {
public loggedIn = false;
}
in the html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="List Providers" tabIcon="list"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Login/Register" tabIcon="finger-print" *ngIf="global.loggedIn"></ion-tab>
<ion-tab tabTitle="Logout" tabIcon="exit" (click)="logout()" *ngIf="!global.loggedIn">
</ion-tab>
IMHO the best way to implement this, is to create a Subject<boolean> or BehaviourSubject<boolean> (this is the difference between them https://stackoverflow.com/a/43351340/7200009). Do you have an AuthService? If so, you can create a subject variable and subscribe to it in your tabspage.
Something like this:
AuthService.ts
loggedInChanged: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
login(){
// Your Login logic.
this.loggedInChanged.next(true);
}
logout(){
// Your Logout logic.
this.loggedInChanged.next(false);
}
TabsPage.ts
loggedIn: boolean;
loggedInChangedSubscription: Subscription;
constructor(private authService: AuthService){}
ionViewDidLoad(){
this.loggedInChangedSubscription = this.authService.loggedInChanged.subscribe(loggedIn => {
this.loggedIn = loggedIn;
})
}
ionViewWillUnload() {
this.loggedInChangedSubscription.unsubscribe();
}
I have an app with the same behavior that you need what I did was use https://ionicframework.com/docs/api/util/Events/
you can generate the event from the close session button and receive the event from the tabs.ts
Pages structure is: Tabs(page1,page2,page3).
When I click a button within in page1, I want to go to page4,
but now we still can see tab, how to make page4 displays as a normal page and can back to tabbed page.
In page1, I use below line to go to page4
this.navCtrl.push(page4);
I think you could first try the following, which is for test only to understand
that this is achievable:
pass params to the ion-tabs like this:
<ion-tabs>
<ion-tab [root]="tabMap" [rootParams]="tabParams" tabIcon="map"></ion-tab>
<ion-tab [root]="tabList" [rootParams]="tabParams" tabIcon="list"></ion-tab>
</ion-tabs>
Prepare the params in the tabs.ts like this:
ionViewWillEnter() {
this.tabParams.parentNav = this.navCtrl;
}
So in the inner page (page1, 2, 3) you can retrieve it, place it in a variable e.g. parentNav, and when you want to navigate out of the tabs page to do a this.parentNav.push(page4).
The proper way I think is to use events events: ionic forum
So in the tabs.ts page you could have this piece of code:
events.subscribe('tabs:newPage', (page) => {
this.navCtrl.push(page);
});
And in each page, or in a service you could have:
newPage(page) {
console.log('navigate to a new page, not a tab')
this.events.publish('tabs:newPage', page);
}
What ionic is ?
If lazy loading,maybe ionic 3 , hod did you declare page4?
You have to push it like this : this.navCtr.push('page4');
If is all ok try this (it 's extracted form an app example) :
static get parameters() {
return [[IonicApp], [NavController], [ConferenceData], [UserData]];
}
constructor(app, nav, ...) {
// all of the constructor code
}
tourFunction() {
let nav = this.app.getComponent('nav');
nav.push('page4');
}
Ref
I am new to ionic2, I want to remove tabs from specific page.
I am using below code :
import { NavController, App } from 'ionic-angular';
constructor(public navCtrl: NavController, public app: App){
this.navCtrl.push(MainPage);
}
but whenever using above code all pages tabs are removed.
I want to remove specific page only.
Please help me....
You can hide tabs on sub pages of a tab by using the tabsHideOnSubPages attribute:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Contacts" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Profile" tabIcon="information-circle" tabsHideOnSubPages="true"></ion-tab>
</ion-tabs>
This will not show tabs for sub pages within this tab.
Also you can just add “tabsHideOnSubPages: true” to your app.module.ts config
IonicModule.forRoot(MyApp,{ tabsHideOnSubPages: true })
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'm using Ionic 3, and clicking on tabs does not update the Url, inspite of using tabUrlPath. Below is the block of code:
<ion-tabs tabsPlacement="top" tabsHighlight="true">
<ion-tab tabTitle="Details" [root]="details" tabUrlPath="details"></ion-tab>
<ion-tab tabTitle="Issues" [root]="issues" tabUrlPath="issues"></ion-tab>
</ion-tabs>
Any idea, what could be missing? Any help would be greatly appreciated.
Did you assign any page component to details and issues variables?
//tabs.ts
import {DetailsPage} from './details/details'
import {IssuesPage} from './issues/issues'
class TabsPage{
details = DetailsPage;
issues = IssuesPage;
constructor(){
}
}