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(){
}
}
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
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
I’m currently trying to show and hide tabs on a page of mine dynamically.
My question is, how do you do that?
I tried declaring a variable in home.ts called seeTabs: boolean = false;
But somehow I can’t assign it’s value to the tab.
I tried doing
<ion-tab … show=seeTabs …></ion-tab>
I also tried
show=“seeTabs”, show=this.seeTabs, show=“this.seeTabs”
but nothing works.
Do you have any idea how to do this?
I mean I tried doing what the documentation said…
https://ionicframework.com/docs/api/components/tabs/Tab/
The right syntax is <ion-tab [show]="seeTabs"></ion-tab>
Hope it helps.
export class UserListPage { seeTabs ;}
ionViewDidLoad() { this.seeTabs = false;}
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 })
<ion-tab title="name" icon="ion-home" ui-sref="tabs.home" badge="12" badge-style="badge-assertive"><ion-nav-view name="home-tab"></ion-nav-view></ion-tab>
this code is ok , badges can normal display, but if code is :
<ion-tab title="我的任务" icon="ion-home" ui-sref="tabs.home" badge="badgenum" badge-style="badge-assertive"><ion-nav-view name="home-tab"></ion-nav-view></ion-tab>
and in controller:$scope.badgenum = 12;
that badges don't display,please help me ,thanks!
You should do two way bind like this.
badge="{{badgenum}}"
the full code
<ion-tab title="我的任务" icon="ion-home" ui-sref="tabs.home" badge="{{badgenum}}" badge-style="badge-assertive"><ion-nav-view name="home-tab"></ion-nav-view></ion-tab>