Ionic 4/Angular Have default tab open atomically

Question

I have a page with 2 tabs. When I go to the page, it starts off as blank with just the 2 tab buttons showing. Once I click on either of the buttons, the contents of the tabs display. How can I make it so when I navigate to that page, one of the tabs is already open by default? Here is the html I have:

<ion-segment [(ngModel)]="list">
          <ion-segment-button value="list">list view</ion-segment-button>
          <ion-segment-button value="cal">calendar view</ion-segment-button>
        </ion-segment>
      <div [ngSwitch]="list">
        <div *ngSwitchCase="'list'">
         **list tab contents**
        </div>
        <div *ngSwitchCase="'cal'">
        **calendar tab contents**
        </div>
      </div>
    </div>

Answer 1

You should set that in the default path of the tabs page routing module. Here you have a full example:

tabs-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab-one',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab-one/tab-one.module').then(m => m.TabOnePageModule)
          }
        ]
      },
      {
        path: 'tab-two',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab-two/tab-two.module').then(m => m.TabTwoPageModule)
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tab-one', // This will be the default tab to load
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

tabs.module.ts

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabsPageRoutingModule } from './tabs-routing.module';
import { TabsPage } from './tabs.page';;

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule // You import the routing module in the tabs page module
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.page.html',
  styleUrls: ['./tabs.page.scss'],
})
export class TabsPage {

  constructor() { }

}

tabs.page.html

<ion-tabs>

  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="tab-one">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab-two">
      <ion-icon name="person-circle-outline"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

tab-one.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { TabOnePage } from './tab-one.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: TabOnePage
      }
    ])
  ],
  declarations: [TabOnePage]
})
export class TabOnePageModule {}

tab-one.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab-one',
  templateUrl: 'tab-one.page.html',
  styleUrls: ['tab-one.page.scss'],
})
export class TabOnePage {

  constructor() {}

}

Answer 2

i've done with this problem using this additional code ngSwitchDefault inside the div of your chosen tab

youre code will be like this

<ion-segment [(ngModel)]="list">
      <ion-segment-button value="list">list view</ion-segment-button>
      <ion-segment-button value="cal">calendar view</ion-segment-button>
    </ion-segment>
  <div [ngSwitch]="list">
    <div *ngSwitchDefault="'list'">
     **list tab contents**
    </div>
    <div *ngSwitchCase="'cal'">
    **calendar tab contents**
    </div>
  </div>
</div>