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:
-
When i click on Search tab, it selects SERVICES segment automatically, but not displaying its content. (see below)
-
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.