Search code examples
javascripttypescriptionic3childviewsionic-tabs

Child views in ionic 3 tabs shows two headers when child component is viewed

i am building ionic 3 app, i have page that have three tabs, the tab contains orders, when an order is clicked, its details page is viewed but here two headers appear, one header of tab view and the other header of order's detail page. i am adding some screenshots to make the issue more clear. First screen shows tab page with one order, Second screen appears when an order is clicked, third screen appears when back button of detail order page is clicked.

this is the first screen showing one order. Screen1

this is the screen 2, two headers are highlighted

this is screen 3, appears when back button of order details is clicked, white area is highlited

Solution

  • i found a solution, i was navigating to order detail page like

    this.navCtrl.push(OrderDetailPage);

    Now i am accessing detail page like below

    this.navCtrl.parent.parent.push(OrderDetailPage);

    the issue no longer happens. Hope it helps some one who have the same issue.