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

Question

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?

Answer 1

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;
}
}