Ionic multiple pages on a page

Is there a way in ionic 2 to have multiple pages within a page…

ie…

header --> html and component

page1 --> html and component
page2 --> html and component
page3 --> html and component

footer --> html and component

1 Like

you can use selecter of that page to do that

@Component({
    selector: 'PageName',
    templateUrl: 'pagename.html'
})

<PageName></PageName>

Hi, not sure if its what you’re looking for but do you mean something like this? Changing the ‘currentPage’ allows you to decide which page to show. This will work with navController calls too if you set currentpage using navParams.

<ion-content>
  <div [ngSwitch]="currentPage">
    <!-- Page 1 -->
    <div *ngSwitchCase="'page1'">
     <p>Page 1 content</p>
    </div>

    <!-- Page 2 -->
    <div *ngSwitchCase="'page2'">
     <p>Page 2 content</p>
    </div>

    <!-- Page 3 -->
    <div *ngSwitchCase="'page3'">
     <p>Page 3 content</p>
    </div>
</div>
</ion-content>

Cheers,
Paul

I want to know about this as well.
I will not be using multiple html files but multiple html templates.

How can I use many different html templates within a single html file and load each one with a tab button?

Several “default templates” answer that quite neatly, whatever ionic 2 or 3 (though the code in frontend is slighlty different). But you have templates with nested tabs, or classic tabs (at the bottom of the screen in your app). For simplicity matters, for example I chose bottom tabs in the bottom of the screen.

After, each page in a ionic app is rendered by what is available by data, providers, for example. If you wanna build super dynamic pages/screens, I advise to take on these templates, and use providers to dynamically create the content in header, footer, and core page, according to user rights.

Because the first part would be user rights.

Hope these 2 cents helps,

from @jamesharvey and our discussion,

This module can work well:

https://www.npmjs.com/package/angular-tabs-component1

Why use a separate package if you can *ngSwitch in the html file? And indeed better use ionic tabs and separate files if logic grows.

@Tommerton Because of speed and file size mainly, I put that inside my rooter “home” page, and ngswitch is nice, but grows bigger and bigger. I start to see the lag now (ngSwitch is cpu and ram intensive if you have quite a lot of content behind). For a final advice, when your app grows larger, you should use providers, well before that to alleviate and ligthen the need of “on-the-fly” building.

1 Like

Hi All,

Thanks to all !

What I actually ended up doing was having a banner in the page based on @hirenkorat3,

<banner-page></banner-page>

and underneath that a ngswitch statement for page content of tables based on @pilotpaul757.

  <div [ngSwitch]="currentTable">

<div *ngSwitchCase="'table1'">
     <table-1-page></table-1-page>
    </div>

<div *ngSwitchCase="'table2'">
     <table-2-page></table-2-page>
    </div>
....

For others who are attempting this, in creating a banner, I had to remove all of the ion-content and ion-header tags, to get it to play nicely with the layout of the pages I was inserting to.

Hope this helps

What will be on the .ts to make this work please?

take a variable-
currentTable = ‘table1’;