Correct ionic structure - single ion-header for whole app


#1

I have an app.component with ion-nav that displays all my pages, along with ion-header which contains ion-navbar.

Each of my pages contains solely ion-content without ion-header, while ion-header is defined in app.component once above ion-nav.

I heard from someone that it’s not a proper ionic structure, instead each page displayed in ion-nav must have its own ion-header (above ion-content). In other words it’s not okay to define a single ion-header for the whole app and each page must have its own ion-header.

Otherwise this incorrect structure can cause problems with the status bar, etc.

Is that correct?


#2

Here’s the answer to that: