CODEWITHSUNDEEP
ionic-frameworkfrontend
Jeroen
Jeroen

Reputation: 31

How to automatically add a query parameter when clicking an ion-tab?

How do you automatically add a query parameter when clicking a tab using ion-tabs in Ionic?

As an example, consider three tabs:

 <ion-tabs>
    <ion-tab-bar slot="top">
      <ion-tab-button tab="tab1">
        <ion-label>Tab1</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab2">
        <ion-label>Tab2</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab3">
        <ion-label>Tab3</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

If I click Tab1, I want to automatically navigate to /tabs/tab1?foo=bar instead of /tabs/tab1 (idem for the other tabs, note that the query parameter value will be dynamic in practice). What is a good, concise way of doing this?

Upvotes: 1

Views: 937

Answers (1)

Callan
Callan

Reputation: 1233

You can simply add ?foo=bar after the tab1, or you can set a variable to it (see tab2), or you can even set conditions (see tab3)

 <ion-tabs>
    <ion-tab-bar slot="top">
      <ion-tab-button tab="tab1?foo=bar">
        <ion-label>Tab1</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab2?foo={{myCustomVariable}}">
        <ion-label>Tab2</ion-label>
      </ion-tab-button>
      <ion-tab-button [tab]="myCustomCondition === true? 'tab3?foo=bar' : 'tab3'">
        <ion-label>Tab3</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="{{getTabRoute(4)}}">
        <ion-label>Tab4</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

getTabRoute(index: number): string {
   if(this.conditionToAddQuryParams === true){
     return 'tab' + index + '?' + this.myQueryParams;
   } else {
     return 'tab' + index;
   }
}

Upvotes: 1

Related Questions