Ionic v3 bind ionic page from ts file

I am binding to ionic input component to html page from ts file. it is showing only text.

My html code is:

<div class="one" [innerHtml]="htmlToAdd"></div>

My ts file code is:

constructor(public sanitizer: DomSanitizer,public navCtrl: NavController, 
public navParams: NavParams) {

 this.htmlToAdd =this.sanitizer.bypassSecurityTrustHtml(  "<ion-label>Gaming</ion-label><ion-select [(ngModel)]='gaming'><ion-option value='nes'>NES</ion-option><ion-option value='n64' >Nintendo64</ion-option></ion-select>");

If you don’t get any better answers, I suggest pretending innerHTML doesn’t exist.

InnerHTML is one of those things that just about entirely goes against the concept of Angular (and 2+ in particular), and thus is really hard to get to work how people want in Ionic.

What are you trying to accomplish? We may be able to offer an alternative.

I try build a dynamic form control. in ts file build a ionic forms bind to html page…

FormBuilder should be sufficient for your needs.

its working fine with html tags… but ionic tags is not working??

You’re not listening. innerHTML is not your friend. Multiple people have explained this to you. Rearchitect.

then how to do a include ionic tags…
any example?


I think you need to study structural directives like *ngFor. See manual for this. This way you can build a large dynamic list of ion-tags.

As to innerHTML: per definition it only accepts a few html tags and sanitises per default (Angular does not trust any input). Irrespective from the point whether you should or should not use it.

BTW, I believe there are ways to dynamically insert angualr/ionic components using dynamiccomponentloader and such, and have the angular engine render it, but that is generally very discouraged and barely has a use case for ionic developers, I would think. I tried it once, and it is horrible!



1 Like

This is my canonical suggestion here.


Your Component would look like:

import { Component } from '@angular/core';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  games = [
    { text : "NES", value : "nes" },
    { text : "N64", value : "n64" }


And your template would look like:

<ion-content padding>

    <ion-select [(ngModel)]="selectGame">
      <ion-option *ngFor="let game of games" value="{{ game.value }}">
        {{ game.text }}


This is bind value from ts to html file… i asked for bind ionic component dynamically…

any way i got it… @rapropos thanks for your reference.