Ionic segment inside ionic tab not displaying child page properly

Hello team,

I’m using ionic-segments inside ionic-tabs (see below image)

Here, Search tab contains more 2 tabs: SERVICES and CAMPAIGNS. Below are my pages.

<ion-nav [root]="rootPage"></ion-nav>


import { Component } from '@angular/core';
import { TabsPage } from '../pages/tabs';

  templateUrl: 'app.html'
export class MyApp {
  rootPage: any = TabsPage;


  <ion-tab [root]="tab1Root" tabTitle="Search" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Chats" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="My Profile" tabIcon="person"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Settings" tabIcon="settings"></ion-tab>


import { Component } from '@angular/core';
import { SearchPage } from '../pages/search/search';
import { ChatListPage } from '../pages/chats/chat-list';
import { MyProfilePage } from '../pages/my-profile/my-profile';
import { SettingsPage } from '../pages/settings/settings';

  templateUrl: 'tabs.html'
export class TabsPage {

  tab1Root = SearchPage;
  tab2Root = ChatListPage;
  tab3Root = MyProfilePage;
  tab4Root = SettingsPage;

  constructor() {}


  <ion-navbar color="primary">
      <ion-icon name="search"></ion-icon>
      {{ 'SEARCH' | translate }}

  <div [ngSwitch]="searchType">
    <page-services-list *ngSwitchCase="'services'"></page-services-list>
    <page-campaigns-list *ngSwitchCase="'campaigns'"></page-campaigns-list>

  <ion-segment [(ngModel)]="searchType">
    <ion-segment-button value="services">
    <ion-segment-button value="campaigns">


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

  templateUrl: 'search.html'
export class SearchPage {
  searchType = 'services';

  constructor() {  }

Now, if i click on Search tab I want SERVICES segment selected and content of SERVICES page to be displayed.


  1. When i click on Search tab, it selects SERVICES segment automatically, but not displaying its content. (see below)

  2. I manually click on CAMPAIGNS then click on SERVICES, it shows me only header part of Services page content.

I checked inspect element, then i found that height of <ion-content> in <page-services-list> is 0. (see below)

I have manually set height to 150 and then i can see content. (see below)

Please help me out. Thanks in advance.

I just converted my Page into Component and it’s working as expected now.