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