How to add a common div which appears in all pages?

Ionic Framework ionic-v3
1

I want to add a custom div (a component) under the header which will appear in all the pages.

Right now I have to add the component between ion-navbar and ion-content in every page. Is there a way to keep the div in one place and have it added under the header everywhere in the app?

This is my app.html,

<ion-nav #navContainer></ion-nav>

<side-menu [menuContent]="navContainer" ><side-menu>

And a page follows the following structure,

<ion-navbar *navbar>

  <ion-title>Page Title </ion-title>

</ion-navbar>

<!-- Where the custom div should be -->

<ion-content>

  <!-- Page content -->

</ion-content>
2

Hello,
I am not sure if I actually understand what you exactly need to do but did you try including that div as a partial template ?
<section ng-include="'views/app/partials/yourDiv.html'" class="partial-template"></section>

3

Right now, I don’t think there is.

In this case, using a custom component would be the best case.

1 Like
4

<ion-nav id=“nav” #content [root]=“rootPage” [class]=“myTheme”>

i am facing same issue if there is any solution let me know… i want add common div which appear on all pages.