[SOLVED]Multiple html templates in single html file using Ion-view


#1

Hello,

I want to use multiple html templates in a single page like in this example:
http://embed.plnkr.co/H5n7SM/

How can I do this on Ionic v3? I tried to use the code from the example and it didn’t work.


#2

@jamesharvey Well the html structure changed a bit, but it’s simple to adapt to what you want. In fact, since Ionic v2 the code in template view is much cleanier (html view).

I’ll put you one of my pages as example, you can adapt to your needs.

<!--
  Generated template for the page.
-->
<ion-header>
  <ion-navbar>
    <ion-title>Cool page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-card>
    <ion-card-header>
      Hi guys
    </ion-card-header>
  </ion-card>

<ion-list>

<ion-text>cool text 1</ion-text>
<ion-text>cool text 2</ion-text>
<ion-text>cool text 3</ion-text>

</ion-list>

</ion-content>

And this is the barebone to a normal template page in html.

Edit : After that, you will use dynamic tags all along to add dynamic pages inside this, aka {{ this.html header or this.htmltext1 }}

Hope it helps,

François


#3

Thanks for your fast response!

I’m looking for a way to have like four pages within one page.
For instance, I will have four buttons and each button will reveal a different page but I’m not looking to have four html files… but just four different HTML templates in a single html file. Only one of them should show up and the rest will be hidden until a user clicks on each button.


This one for example has only one html file but has many html templates… is there an easy way to do something like this on Ionic v3?


#4

So this is more like what I’m trying to create:

This is written in JavaScript so obviously it’s not going to work on Ionic 3.
Any idea would be so appreciated.


#5

The answer is right here.
You have to use Angular TabModule.
https://www.npmjs.com/package/angular-tabs-component

I managed to make four tabs & contents on a single page.


#6

@jamesharvey ok thx i’ll have a look at that package and tell the others thread below they could use it.


#7

Yes, it’s super easy to use. Just install npm and import TabModule to app.components.ts and your home.ts, start using it.


#8

Can your share your html and .ts code so that I can get a clear picture on how to implement this.