Ionic tags are not working in InnerHTML


I need to render HTML as declared in my .ts file.

I found that normal HTML tags works fine, but when ionic tags are added with them, ionic tags don’t work.

When I inspect element on page, I could see ionic tag code there, but unfortunately they don’t work.

Below is my .ts file code

  selector: 'page-html-test',
  templateUrl: 'html-test.html',
export class HtmlTestPage {

  html: any;
  constructor(public navCtrl: NavController, 
                public navParams: NavParams,
              ) {}

  ionViewDidLoad() {
      this.html = '<button ion-button round (click)="refresh()">refresh button </button>';

  console.log('test-refreshed button clicked');


@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  // transform(value) {
  //   console.log(this.sanitized.bypassSecurityTrustHtml(value))
  //   return this.sanitized.bypassSecurityTrustHtml(value);
  // }

  public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
		switch (type) {
			case 'html':
				return this.sanitized.bypassSecurityTrustHtml(value);
			case 'style':
				return this.sanitized.bypassSecurityTrustStyle(value);
			case 'script':
				return this.sanitized.bypassSecurityTrustScript(value);
			case 'url':
				return this.sanitized.bypassSecurityTrustUrl(value);
			case 'resourceUrl':
				return this.sanitized.bypassSecurityTrustResourceUrl(value);
				throw new Error(`Unable to bypass security for invalid type: ${type}`);

below is the code for corresponding HTML page -




<ion-content padding>

<div [innerHtml]="html | safeHtml: 'html'">

<button ion-button (click)="refresh()">test-refresh</button>

below is the output when I run this code

49 PM

i want the refresh button should work and look like the TEST_REFRESH button.
Can you help me ?


If you don’t get any better answers, I would suggest restructuring your app so that it does not rely on innerHTML.


try to put css ion button in that <div .. > tag


No, It’s not working.


it will display as button

<div ion-button [innerHtml]="html">

can you show me your code ?


This will treat that div as ion-button,
if HTML is changes in .ts file to ion-card then this will not work.