Ionic tags are not working in InnerHTML

Ionic Framework ionic-v3
1

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

@IonicPage()
@Component({
  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>';
  }

refresh(){
  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);
			default:
				throw new Error(`Unable to bypass security for invalid type: ${type}`);
		}
	}
}

below is the code for corresponding HTML page -

<ion-header>

  <ion-navbar>
    <ion-title>Html-Test</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

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

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

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 ?
Thanks.

2

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

3

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

4

@hirenkorat3
No, It’s not working.

5

it will display as button

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

can you show me your code ?

2 Likes
6

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