Dynamic ion-tabs

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-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 tab="tab2">
      <ion-label>Tab 2</ion-label>
      <ion-icon name="book"></ion-icon>

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

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

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?

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.


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!

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