How do I dynamically add html to template from a class variable

[rwillems]

I’m trying to write a large set of html text related to a custom widget to one of my tabbed pages. The set looks like “<div id=‘myTableDivSet’ style= …”. To keep it simple, assume all I want to write is

Hello world!

(but know that the set of html text is large). I can get it to the page but it writes it there as a string, not as html. The type of the text in my *.ts file is string. I also tried making it the “any” type but that didn’t help. I use {{helloStr}} in my template like this:

{{helloStr}}

What I get is:

**"**

Hello world!

**"**

If it would have left off the quotes before

and after

I would have been happy.

I’m using a relatively new version of Ionic. I am fairly new to Ionic and I did a fair amount of googling to try to find an answer but didn’t succeed. Thanks in advance for any help you can provide.

[rwillems]

Sorry, my code examples in the post got interpreted instead of being displayed literally. I don’t post very often. I’ll try to get it right in this post.

Assume all I want to write is <p>Hello world!</p>

I use {{helloStr}} in my template like this:
<div *ngIf="SettingsInfoShowing == false">{{helloStr}}</div>

What I get inside the div is: "<p>Hello world!</p>"

If it would have left the quotes off before the <p> and after the </p> I would have been happy.

[pwespi]

You could use [innerHTML]="helloStr". However this is not recommended, see:

Html in my text fields

Forgive me is this is an an obvious question but i’m new to ionic. i’ve created a small messaging part in my app, but links don’t appear as links, just normal text. Is there an easy way to make them clickable?

Asking your advise about dynamic/static loading components/pages/html

I went through this with Markdown, tried a bunch of things, and here’s what I eventually settled on: Store your objects however is convenient for you. In my case, that’s markdown source. Define two components; we’ll call them skeleton and bone for now. skeleton has an input property giving it the source. In ngOnChanges, you need to parse that source into an array of elements, each corresponding to a different type of bone. skeleton's template looks something like this: <template ngFor let-b…

[rwillems]

Thanks pwepsi.

I had seen the posts about innerHTML but a <div>, the element I’m trying to put html into, doesn’t have the innerHtml capability? (I also didn’t get why it was to be avoided. My case of computing the html and then placing it somewhere on a page is necessary for my application.)

The second example you posted seemed to be written pre-Ionic2. Do you have an example using Ionic2? (I didn’t come from Angular prior to starting with Ionic2.)

Lastly, although my simple case was just trying to insert a single paragraph, the html that I am really trying to insert is many lines and elements long, contains lots of <tr>, <td>, etc.

Thanks for your reply,
Rich

[anna_liebt]

Hello,

instead

<div *ngIf="SettingsInfoShowing == false">{{helloStr}}</div>

you can use maybe a custom component

<div *ngIf="SettingsInfoShowing == false"><mycomponent></mycomponent></div>

and inside your custom component whatever you like.

Best regards, anna-liebt

[rwillems]

Could I fill the custom component dynamically? Can you give a short example or refer me to a place where that is done?

The custom component is like a calendar where it’s contents change month to month. (A Saturday may have the day number “1” in it on one month but not on other months for that year.) The dynamism is that the contents of a cell in a table maybe have a different number in it or a different color, etc.

Thanks

[anna_liebt]

Hello,
yes you can fill it dynamically, bind to properties, etc. A custom component is something like a usercontrol etc.

It is for me as beginner difficultiy to give you the right advise, but others have made tutorials that are better, what I can explain.

For example josh morony https://www.joshmorony.com/build-a-custom-flash-card-component-in-ionic-2/ has some short examples.

Or http://learnangular2.com/components/ for a quick overview

Or https://angular.io/guide/quickstart for a deeper look.

So you create or custom component as you want and with NgIf you make a decision to insert it or not, The custom component can have inside html as you want or other custom components or external libarys etc.

Hope that helps, best regards anna-liebt.

[rwillems]

Thanks again Anna but I think the examples you point me to are a different kind of dynamism than I’m after. I think they’re about putting one static component or another on a page but not about being able to compose html on the fly in a typescript file and have it subsequently show up on a page. I can do what I’m asking with jquery’s append() function. I can do something like

$("#settingsTable").append(helloStr);

in my javascript file and have it put the html contents of helloStr at a <div> named settingsTable in my *.html file. My javascript can set helloStr to <p>Hello</p> one moment and set helloStr to <div>World</div> the next. Whatever html I put in helloStr gets deposited on the page.

Can I continue to use jquery for something like this in Ionic? Should I ?
I just assumed that there was an Ionic way to do it and that I should, in general, migrate away from jquery in my Ionic apps.

[Tommertom]

Hi

You can use ngFor, ngIf or ngSwitch to use angular’s dynamic feauters, besides custom components. Innerhtml is a matter of taste and I use it, but it allows a limited set of html tags to be used

Check angular.io on structural directives

Using jquery to manipulate the Dom is like using BMW parts to make a Mercedes drive. It can work but eventually is a dead end street. Cant have angular and jquery fight for DOM manipulations.

Many discussion have been done on this part in this forum. Your choice on how to make it work

Regards

Tom

[anna_liebt]

Hello,
you can do many things in a custom component. I don’t think you wanna put Hello and World into your Div. Maybe it is better you give us a more realistic scenarion, what you wanna do.

`<div *ngIf="SettingsInfoShowing == false"><mycomponent></mycomponent></div>`

Inside mycomponent you can do what you want. Simple html or more complex html, bindings, dynamic creating etc. If this is not enought you can do some custom component, that fits your need.

<div *ngIf="SettingsInfoShowing == false"><mycomponent></mycomponent></div>
<div *ngIf="SettingsInfoShowing == true"><myothercomponent></myothercomponent>
</div>
<div *ngIf="Settingsblub == bla"><myheavycomponent [blabla] = 'yoman'></myheavycomponent></div>

If ngIf gets true your component will inserted else not. You can also use ngswitch and so on etc.

Josh show you from scratch howto add a custom component (you can also take look to a other tutorial from hinm or other persons)
The 2.nd link gives you a quick overview of binding, inputs, outputs, etc. whitout much blingbling. Everything you need to make your component less statical and more dynamic.
And 3.td link digs deeper.

Binding with {{yourPropertie}} is great, easy and fast for showing values, but I think if you want create more complex (or formatted} things you are better with customcomponents.

Best regards, anna-liebt

[rwillems]

Thanks both to Tom and Anna for your advice and links. I revisited using [innerHTML] to see if I could make it work somehow. My second post indicated that I had tried to set the innerHTML of a div but couldn’t. I must have been doing something wrong because now it’s working for me. I can put some pretty elaborate html in a string and have the string get placed into the div and act like markup instead of simply be a string. Here’s what I did …

1. I put whatever html I wanted in a class member string variable in my *.ts file, a string named helloStr.
2. I put a div in my *.html file that looked like <div [innerHTML]="helloStr"></div>

I must have had a typo somewhere in my first attempt. Thanks again for all of the help,
Rich

[AaronSterling]

I don’t fully understand your problem constraints, but, as a general principle, their solutions are better than your solution, because of the hidden problems with innerHTML. See here for example. Angular addresses some of those concerns through its HTML sanitizer. But the general rule of thumb is: only use innerHTML for short, simple things that you yourself create. (And FYI I try not to use it at all.) Deviate from that and you need to know what you’re doing. It is probably more performant, and safer, to let Angular do the work.

[rwillems]

Thanks for the feedback Aaron. I read the blog you cited after you cited it. I don’t have any <script> tags in what I’m inserting. I’ll try to remember the other points that were made there but this is my first go round with Ionic and I think I’ll settle for using innerHTML for now. I think I have a valid case for using it based on what I’m trying to do and some of the alternatives I’ve found here and via Googling - but I’m always willing to look at things another way. It was always my intent to stay within the methods provided by Ionic whenever possible and my app will probably only have two places in it where innerHTML would be used. I just think that doing other than innerHTML at this point, based on how much effort they look like they would take and knowing I would stumble with their new ideas for awhile, may not be the best thing to do on my first Ionic go round.
Thanks,
Rich