Loading custom HTML from a file?

Ionic Framework ionic-v3
1

I’ve got some flowcharts built in HTML that work fine in Ionic 1 if you put them in their own html file.

I’m sure they’ll work fine in Ionic 2, but each one has it’s own HTML page and I don’t really want to do this.

I’d like dynamically generate what is in the ion-content tag, with something like {{content.flowchart1}}. The html is just styled divs.

What’s the best way to do this?

2

You could create a set of variables that contain links to those files then use something like an iframe to display the files.

Edit:
Or you could try this…
<object type="text/html" data="mypage.html" ></object>

3

Do I need an iFrame though? Can I not just do what you’ve done with the <object? tag with an ion-content tag?

I could test this but I’d like to know the best way to start…

4

Put the object tag inside the ion-content then you can set variables with your html filenames in your ts file like…
chartOne: string = ‘myFile.html’;

Keep the html files in the page folder that you’re working with.

Then reference that variable in the object tag.

5

Thanks. I’ll try it.

6

Hmmm. I realised the problem - I want to DL these docs from Firebase etc.

I’ve done this before with JSON but I need to do it with these html files.

Eg. If I have the content in a:

var content.html1 = `
<html>

`
7

So you want to store the files in firebase storage and retrieve them then represent them in the HTML?

Or are you storing them in firebases database as text?

8

<div [inner-html]="content.flowchart"></div>

… will display the content as html.

{{content.flowchart}}

…will display it as literal text.

2 Likes
9

They are stored as text.

10

So I tried this and it didn’t work.

I get a lot of errors.

Any way to load in some Ionic content that’s preformed HTML?

11

This is a very difficult question to answer, so I’m instead going to answer “should I persist in attempting to try to do this?” with a resounding “no”. Angular wants templates to be static and available at build time, for very good technical and security reasons.

12

This is loading in static Ionic content though. It’s the same as leading any template, just that I need to be able to pull the template from Firebase (or something like it).

I can already do this with JSON that then gets iterated over with ngIf to construct a page.

13

No it isn’t. The AoT compiler does not have access to it at build time.

14

So how are we supposed to update content?

If you have a predictable structure you can iterate over data, like JSON or objects, and that works fine.

This content is not predictable in it’s structure.

15

All I can suggest is “make it predictable”. I’ve done so with markdown, which is a relatively complex format.

16

I could use markdown I suppose. And they use ngIf to construct the page?

17

Here is a post describing how I dealt with this. I used markdown-it as the parser.