Hi there
I am trying to make an ionic tab dynamic. I have 5 tabs on my app. The last tab need to change base on the users previous page that he/she was on
Here is a picture of it, So as you can there are 5 tabs(the last one is a location icon). I need the last one to change based on the users page history.
My thinking is to store the page history in locastorage and call it everytime the page changes, though I am not sure how to go about this
Thanks
The most simple thing would be if you would use if/else.
As example:
Page A wonāt change the icon, Page B changes the icon.
If the User is browsing on Page A do nothing.
Else if browsing on Page B change icon.
Just put the command for the icon replacement into ionViewDidLoad on Page B.
If you are using navPop you can check wich Page was visited before based on that you can do something like if Page B was visited change icon.
I donāt know how you are handling your Tabbar but this would be the most simple things that come to my mind. 
Iām using the the standard ionic tab layout
Tabs.ts
tab1Root = HomePage;
tab2Root = ProductSelectionPage;
tab3Root = SettingsPage;
tab4Root = ProjectCentrePage;
tab5Root = WhereToBuyPage;
Tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="" tabIcon="appname-home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="" tabIcon="appname-elephant"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="" tabIcon="appname-settings"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="" tabIcon="appname-hammer"></ion-tab>
<ion-tab [root]="tab5Root" tabTitle="" tabIcon="appname-location"></ion-tab>
</ion-tabs>
Basically need to change tab5Root to current page that user is on
I am trying this but no luck
this.tab5Root = this.appCtrl.getRootNav().push(CurrentPage);
Can you post your whole Tabs.ts please ? I might have an idea.
This is all
import { Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { ProductSelectionPage } from '../products/product-selection/product-selection';
import { SettingsPage } from '../settings/settings';
import { ProjectCentrePage } from '../project-centre/project-centre';
import { WhereToBuyPage } from '../where-to-buy/where-to-buy/where-to-buy';
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = ProductSelectionPage;
tab3Root = SettingsPage;
tab4Root = ProjectCentrePage;
tab5Root = WhereToBuyPage;
constructor(public navCtrl: NavController) {
}
}
Alright I didnāt changed the icons yet lets just see if the Page even changes.
import { Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { ProductSelectionPage } from '../products/product-selection/product-selection';
import { SettingsPage } from '../settings/settings';
import { ProjectCentrePage } from '../project-centre/project-centre';
import { WhereToBuyPage } from '../where-to-buy/where-to-buy/where-to-buy';
import { YOUR_NEW_PAGE } from '../;
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = ProductSelectionPage;
tab3Root = SettingsPage;
tab4Root = ProjectCentrePage;
tab5Root = WhereToBuyPage;
public rootPage: any = HomePage;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad() {
if (this.navController.getActive().component === YOUR_NEW_PAGE) {
this.tab5Root = YOUR_NEW_PAGE;
}
else {
console.log('Tab stays');
}
}
}
How much Angular do you know? The āsimplestā solution is to create a provider. That providerās job is to emit the current value of the icon. Your tabs page listens to that. In Angular, you can use a BehaviorSubject. Thatās best. Look it up and see if you can figure it out. It takes some getting used to.
If you donāt like that, another solution is to use Ionic Events Your tabs page subscribes to the āchangeIconā event, and you publish an event whenever the icon changes.
this causes an error at āthis.tab5Root = SettingsPage;ā
[ts]
Type ātypeof SettingsPageā is not assignable to type ātypeof WhereToBuyPageā.
Type āSettingsPageā is not assignable to type āWhereToBuyPageā.
Property āgotoProductLocatorā is missing in type āSettingsPageā.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { ProductSelectionPage } from '../products/product-selection/product-selection';
import { SettingsPage } from '../settings/settings';
import { ProjectCentrePage } from '../project-centre/project-centre';
import { WhereToBuyPage } from '../where-to-buy/where-to-buy/where-to-buy';
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = ProductSelectionPage;
tab3Root = SettingsPage;
tab4Root = ProjectCentrePage;
tab5Root = WhereToBuyPage;
public rootPage: any = HomePage;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad() {
if (this.navCtrl.getActive().component === SettingsPage) {
this.tab5Root = SettingsPage;
}
else {
console.log('Tab stays');
}
}
}
I tried not assigning tab5Root = WhereToBuyPage but still gives the error
the problem seems to be setting the last tab to a new value, I have tried updating the tab icon via a provide but there seems to be an issue when updating the tab to a new value once itās initialised at app startup
Does the variable for the icon name change value but the tab icon stays the same?
Ideally both need to change
Ive tried some things out the problem is that the tabs page only loads once and then wonāt refresh anymore and you canāt acces the properties from a different page.
Id say go for @AaronSterling answer and create a provider.
ok thanks for your help, much appreciated