Ionic2 Dynamic HTML Binding

Ionic Framework ionic-v3
1

I am trying to bind some ionic 2 html tags in run-time,

My ode works well with standard html tags, but when we come to ionic tags it shows it without any style, just plain text.

Here is what i am doing,

  <div   [innerHTML]="html">
  </div>

  this.html = "  <button block >Test Button</button>";

image
image1412×254 13.8 KB

Any Help ?

2

What is your output if you put that for example???

  <button primary block>
  <ion-icon name="search"></ion-icon>
  Search
  </button>
3

Same result, no style applied

4

Can u put ur code html and js please?

5

TS:
import {Page} from ‘ionic-angular’;

@Page({
    templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
    html;
    constructor() {
        this.html = "  <button primary block><ion-icon name=\"search\"></ion-icon>Search  </button>";
    }
}

HTML:

<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

<ion-content padding class="page1">
  <div   [innerHTML]="html">
  </div>
</ion-content>
6

I can not put to work your code… :frowning:
Then, can you try to play with Angular2 Components?
Create a new component called button blabla and use inside your Page1 (or whatever page or component…). That works and is dynamic too.

7

My Form will be data driven form, i don’t know in advance what it will contain, all the components should be added based on the given data.

8

@mhartington @brandyshea Could you please help in this ?

9

Unfortunately since you’re having to use innerHtml to unsafely display markup, there’s not a whole lot that you can do. You can’t actually target any of that html with javascript. Sadly, there’s nothing you can do about that.

10

You could try playing with DynamicComponentLoader, but I found it relatively gnarly.

11

I think this is a big issue in ionic lib, i was able to do this with similar libs before,

12

First off, it’s an Angular issue, not an Ionic issue. Secondly, I originally also thought it was a big deal, but it’s so challenging to use things like ng-bind-html and $compile in a secure manner that now I’m actually glad that Angular2 doesn’t let me lean on that particular crutch. I think there’s probably a way for you to do roughly what you want using only *ngFor and custom directives, managing the custom stuff as an iterable in the controller. It’s hard to be more specific until you share more details about exactly what you are trying to achieve.

1 Like
13

But i am able to do it using angular2, the problem come when i am trying to use ionic2 tags, check this plnkr demo, Plunker - Angular2 + Typescript Demo Plunk

14

Based how you’re describing things, no you’re not able to do this in pure angular 2

This is not a bug in Ionic, but an quirk in Angular.
It’s all the best though, say you get html for a third party service, one that you’re not sure if you can trust or not.

They could send down some code that has inline javascript it in. Or that needs javascript to run.
But how do you know if it’s something you can trust.

As @rapropos said, this is good that you cannot do this.