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.
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 />
or <div id="component1TemplateArea" /> @Compnent(templateSelector=“component1TemplateArea”)
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]; }
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.