Dynamic ion-tabs

@RaulGM wrote:

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?

Posts: 1

Participants: 1

Read full topic