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
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
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.