How to bind html with ionic tags


#1

I want to render html to my template by passing variable (templateHtml) but is not render the html only text.
Any solution?

my template

<ion-content padding >
  <div [innerHtml]="templateHtml"></div>
</ion-content>

my component

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  templateHtml: any = `<button ion-button (click) = "testClick()">Test</button>`;

  constructor(public navCtrl: NavController) {
    
  }

  testClick() {
    console.log('click');
  }
}

#2

If you don’t get any better answers, I would suggest pretending innerHTML doesn’t exist. It encourages unidiomatic code that is hard to read, maintain, and test, and doesn’t do what people expect it to, as you have discovered.