Dynamic ion-tabs

Ionic Framework
1

Hi everyone!

I’m trying to make a dynamic ion-tabs. When the user sets a variable as true in a page within the tabs, there should be 4 tabs and when it sets the value as false, there should be only 3 of them.

The trick is that the user can switch between them anytime and the tabs have to change as soon as the user changes his/her mind.

So, the tabs.html should be:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" *ngIf = 'ifTheValueIsTrue">
      <ion-label>Tab 1</ion-label>
      <ion-icon name="book"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-label>Tab 2</ion-label>
      <ion-icon name="book"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-label>Tab 3</ion-label>
      <ion-icon name="book"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-label>Tab 4</ion-label>
      <ion-icon name="book"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

The Tabs.ts should go something like this:

ifTheValueIsTrue = true;

aFunctionToUpdateTheValue () {
  this.ifTheValueIsTrue = !this.ifTheValueIsTrue;
}

And somehow call this function from some other page when the value is changed. I am stuck with this problem for days now. I’m thinking maybe an observer to a service?

2

That’s how I would do it, but a couple of subtle UI things:

Users expect navigational UI elements like tabs to be in consistent locations, so if you insist on using *ngIf here, I would put the appearing/disappearing tab in the final slot, not the first. But better still IMHO would be to have it always present, but use this toggle value to enable or disable it.

2 Likes
3

Yes, I set the ngIf as the first one so there is no way anyone could miss it. Maybe if it was on the last tab you wouldn’t notice it.

I will try toggle. I didn’t see it in the docs.

Thanks for your reply!

4

Perhaps I didn’t write that very well. What I meant was “use whatever boolean value you are currently using to make the tab appear and disappear, and instead make that tab enable and disable”.