Ionic 4 preselect a tab in a modal

user_736967 0
Viewed 2638

I have a modal that is launched when I click a button

async launchCalculator() {
  const calculator = await this.modalController.create({
    component: CalculatorPage,
    componentProps: {
      dosingType: this.dosingType
    },
    showBackdrop: true,
  });
  return await calculator.present();
}

Inside the modal I have 2 tabs. I am trying to preselect a tab and it is not working.

<ion-header>
  <ion-toolbar>
    <ion-title>Dosing Calculator</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding class="white-bg">

  <ion-tabs >
    <ion-tab tab="standard">standard content</ion-tab>
    <ion-tab tab="hepatic">hepatic Content</ion-tab>

    <ion-tab-bar slot="top" [selectedTab]="dosingType">
      <ion-tab-button tab="standard">
        <ion-label>Standard</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="hepatic">
        <ion-label>Hepatic<br>Impairment</ion-label>
      </ion-tab-button>
    </ion-tab-bar>

  </ion-tabs>

</ion-content>

I have set [selectedTab] on the tab-bar and it is not preselecting the tab. If I change the attribute to use:

<ion-tab-bar slot="top" selected-tab="standard">

It sort of works. The tab at least has the selected display state at that point, however, the tab content (should show "standard content") is not visible until I click the tab. Surely I am doing something wrong. Any ideas?

Figured it out

First <ion-tabs #dosingTabs> add an id. Then in your export @ViewChild('dosingTabs') tabs:Tabs; and then proceed to call this.tabs.select(<name or index>)

ionic4 ionic-framework angular
1 Answers

Using Ionic 4.6.0 if you give ion-tabs an id in the html template, as mentioned above:

<ion-tabs #tabs>

and in your corresponding component place:

@ViewChild('tabs', { static: true }) tabs: IonTabs; imported with

import { IonTabs } from '@ionic/angular'

then you can set the default tab with this when needed in the component:

 this.tabs.select(<name or index>);
user_64367180
Related