Ionic v3 bind ionic page from ts file

Ionic Framework ionic-v3
#1

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>");

output1
output1.png289×527 4.5 KB

#2

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

#3

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.

#4

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

#5

FormBuilder should be sufficient for your needs.

#6

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

#7

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

#8

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

#9

Hi

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

https://angular.io/guide/structural-directives

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.
https://angular.io/guide/security

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!

Regards,

Tom

1 Like
#10

This is my canonical suggestion here.

#11

Example:

Your Component would look like:

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

@Component({
  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-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="selectGame">
      <ion-option *ngFor="let game of games" value="{{ game.value }}">
        {{ game.text }}
      </ion-option>
    </ion-select>
  </ion-item>

</ion-content>
#12

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.