Ionic segment inside ionic tab not displaying child page properly

[niravparsana94]

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.

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

app.component.ts

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = TabsPage;

Tabs.html

<ion-tabs>
  <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>
</ion-tabs>

Tabs.ts

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

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

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

  constructor() {}
}

Search.html

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

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

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

Search.ts

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

@Component({
  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.

Issues:

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.
Nirav.

[niravparsana94]

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