Lavanya Parvathi Lavanya Parvathi - 4 months ago 38
TypeScript Question

unable to create header and subheader using tabs concept in ionic2

i am using side menus to navigate to my tabs page.

I am facing an issues with myheader.

How do i get according to the image given here as img1 using tabs concept in ionic2

enter image description here

I used the code as


<ion-tabs tabsPlacement="top" primary>
<ion-tab [root]="tab1Root" tabTitle="PROFILE"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="ORDERS"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="PASSWORD"></ion-tab>


after this code i am getting the out like the below image


I can't see the entire code, but think the issue with your code is that you're not including the header in the tabs view. Please take a look at this plunker.

Like you can see there, you can achieve that design with this code in your view:

  <ion-navbar primary>
      My Account
<ion-tabs #myTabs primary>
  <ion-tab [root]="tab1Root" tabTitle="Profile"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Orders"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Password"></ion-tab>