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


#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.