Include other page

Ionic Framework ionic-v3
1

hi is anyone here know how to include other page in ionic 3, like in angularJS ng-include?

2

Page ‘template’ or Page ‘component’?

See: https://angular.io/guide/styleguide#extract-templates-and-styles-to-their-own-files

3

i want to include
the page component.

4

Like this:

import { OtherPage } from '@pages/other/other';

See: https://github.com/Robinyo/big-top/blob/master/src/pages/introduction/introduction.ts

5

what i want to achieve is like i want to include other page to my home page

like this.

24321703_1742405685793840_1942556376_o
24321703_1742405685793840_1942556376_o.jpg1280×826 26.2 KB

6

Ok, so an </ion-tabs> is a ‘page’ that includes other ‘pages’:

<ion-tabs [selectedIndex]="tabIndex" name="event">
  <ion-tab [root]="tab1Root" tabTitle="Discover" tabIcon="beer"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Me" tabIcon="person"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="My Events" tabIcon="ribbon"></ion-tab>
</ion-tabs>

See: https://github.com/Robinyo/big-top/blob/master/src/pages/tabs/tabs.html

7

in my case ion-tab is not applicable to my needs, i just want to include other page to my home page when the home page is loaded…

1 Like
8

Ok, so just include the ‘selector’ for the page on your ‘home’ page:

<ion-content padding>

   <page-number-1>
   </page-number-1>

   <page-number-2>
   </page-number-2>

   <page-number-3>
   </page-number-3>

</ion-content>

Like you do with an <ion-slides> and <ion-slide>: https://github.com/Robinyo/big-top/blob/master/src/pages/introduction/introduction.html

9

what about if we have it using lazy loading?

I imported the module on my original page but still complaining about it:

Uncaught (in promise): Error: Template parse errors:
‘page-create-account’ is not a known element:

  1. If ‘page-create-account’ is an Angular component, then verify that it is part of this module
10

AFter doing what @robinyo mentioned
ie:

<ion-content padding>

   <page-number-1>
   </page-number-1>

   <page-number-2>
   </page-number-2>

   <page-number-3>
   </page-number-3>

</ion-content>

You’re going to want to make sure that the module associated to page-number-1 exports its components:

@NgModule({
  declarations: [
    PageNumber1,
  ],
  imports: [
    IonicPageModule.forChild(PageNumber1),
  ],
 exports: [ // <----this is needed
   PageNumber1
 ]
})
export class PageNumber1Module {}

Then you’re also going to want to make sure that PageNumber1Module is either imported globally or by the component using it