How to render dynamic components in ionic 2

Question

I need render button but it doesn't work I use ionic 2

home.ts

import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      content:string ='<button ion-button color="light">Light</button>';
      constructor(public navCtrl: NavController) {
      }
    }

home.html

<ion-content>
<ion-card>
    {{content}}
</ion-card>
</ion-content>

May I ask what do you need to accomplish? Because maybe there's another way to do it instead of using the `DomSanitizer` and so on... — sebaferreras, Dec 09 '16 at 13:24

score 1 · Answer 1 · answered Dec 09 '16 at 08:04

1

Change code to <ion-card [innerHtml]="content"></ion-card>

{{content}} will just print out the value as a string. But the innerHtml will actually use the raw html data

answered Dec 09 '16 at 08:04

Ivar Reukers

7,370
8
51
93

"innerHtml" work fine with string(h1,p,div) if use it doesn't work I don't know why > – otaroo Dec 09 '16 at 08:14
Take a look at the answer here http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 – Ivar Reukers Dec 09 '16 at 08:20

How to render dynamic components in ionic 2

1 Answers1