Ionic 2 reusable page templates

I started with Ionic2 trying to mix a tab main page layout that has a menu with also sub pages having more of the drill in and back button layout. So I have two or three primary layouts, any given page will have one. In the starter tutorial I was surprised there are 3 pages and each page’s template html has repeating markup…ie

> <ion-navbar *navbar>
>   <ion-title>Tab 1</ion-title>
> </ion-navbar>

> <ion-content padding class="page1">
>   <h2>Welcome to Ionic!</h2>
>   <p>
>     This starter project comes with simple tabs-based layout for apps
>     that are going to primarily use a Tabbed UI.
>   </p>
>   <p>
>     Take a look at the <code>www/app/</code> directory to add or change tabs,
>     update any existing page or create new pages.
>   </p>
> </ion-content>

I do NOT want to have this layout repeated on each page. How can I have a given page use a certain template/layout. So what Ionic is calling the “template” to me is really specific to that page, but any given page should be injected into an overall template that ensures navigation, headers, footers, etc are common and managed in one place. Can anyone point to example please…, thanks.


You could just create a sub Navigation View and change the root of that nav-view

Thank you ihadeed, but I am kind of lost on this. Can you elaborate with an example. I am new to Angular2 and struggling to understand how the overall page layout is organized. I understand a component or page has a template that is just the html snippet for it. What I am not understaning is how to I declare an overall template like…
nav header and menu link on top
then content below
then footer

and each page uses this template so the component injects its template into the main content area but the header stuff is all reused. Also my root pages for a “tab” layout would have the root page template, while drill in pages header would just have a back button and title probably, but need a different template.

The main thing I dont understand is where you anchor/hook a component to the DOM. So dont we need some…
<div component-hookup-thigie goes here />
<div id="component1TemplateArea" />

kind of thing…??

I have not tested this personally. It’s just an assumption based on my understanding to Ionic 2.

In the section that you need to change, place the following code in there:

<ion-nav [root]="myCustomNavRoot"></ion-nav>

Then in your JS/TS you need to create a function that changes the value of myCustomNavRoot to the page that you would like to display. Example (TypeScript):

Import the pages that you will be displaying at the top of your document
import {Page1} from './pages/page1/page1'; import {Page1} from './pages/page2/page2'; import {Page1} from './pages/page3/page3';

Then we can have a function that sets the root to a certain page
showPage1 { this.myCustomNavRoot = Page1; }

Another way to change the page is by defining a string/int value that refers to each page that you have… or could be just an array (but you have to remember the index of each page)… like this example:
this.availablePages = [Page1, Page2, Page3];

Then you can create one function to handle all pages:
switchPage(pageId : number){ this.myCustomNavRoot = this.availablePages[pageId]; }

Did you manage to find a good solution for this in the end?


Did you found solution for this? I am also looking to implement same thing. Is it possible the way you have mentioned?


1 Like

Not sure if this helps you but i used the ‘tabs’ CLI command to generate the tabs which automatically link to each page you generate.
Try this:-
ionic g tabs Tabs

Yeah, I’m looking for something similar, a feature like “extends { some layout(a navbar, or a footer, etc.)}” , i could just render the same component for every page, just changing the title of the page, or any other custom element… Does Ionic 2 offer a clear approach to do that?

In most cases, property binding and interpolation will achieve your underlying goal. Yes, component inheritance now exists in Angular, but I think it’s largely a solution in search of a problem. For example, you can change titles with {{title}} and @Input() title: string.

1 Like

thanks for your answer…