Need to compile and bind ionic/html content(tags)

Madhudk · November 3, 2017, 1:08pm

Hi

i have a requirement of binding html contents dynamically.
if i use innerhtml html content will bind, but events/styles will not work.

i followed this

html page

<ion-content padding #container>

TS page

import { Component, Compiler, ViewChild, ViewContainerRef, ComponentFactoryResolver, AfterContentInit, ComponentFactory, ComponentRef,OnDestroy, NgModule, ModuleWithComponentFactories} from ‘@angular/core’;

import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { CommonModule } from “@angular/common”;

import { Http, Headers,RequestOptions } from ‘@angular/http’;

/**

Generated class for the HomePage page.
See https://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
})
export class HomePage implements AfterContentInit, OnDestroy {

private dynamicComponentRefs: ComponentRef;

@ViewChild(‘container’, { read: ViewContainerRef }) container: ViewContainerRef;

constructor(private resolver: ComponentFactoryResolver, private compiler: Compiler,public http: Http) {}

ngAfterContentInit() {
this.getdata();
}

ngOnDestroy() {
/* Make sure you destroy all dynamically created components to avoid leaks */
// this.dynamicComponentRefs.forEach(dcr => {
// dcr.destroy();
// });
}

getdata(){
let instance=this;

this.http.get("https://template.cimm2.com/Welcome.action")
  .subscribe((data:any) => {
    instance.binddata(data._body);// here il get html contents buttons,list etc
   }, error => {
    console.log(error);// Error getting the data
  });

}

binddata(html){
    this.compiler.compileModuleAndAllComponentsAsync(createDynamicComponent(html))
    .then((mwcf: ModuleWithComponentFactories<any>) => {
      let factory: ComponentFactory<any> = mwcf.componentFactories.find(cf => 
        cf.componentType.name === 'DynamicComponent');
        this.dynamicComponentRefs=(this.container.createComponent(factory));
    });
}

}

//export function createDynamicComponent(html: string): Type {
export function createDynamicComponent(html: string){
@Component({
template: html,
// styles: [‘button{padding:4px;background-color:blue;}’],
styleUrls: [’./build/main.css’],
})
class DynamicComponent {
private clause1: boolean = true;
private clause2: boolean = false;
private clicked = false;

buttonClicked() {
  this.clicked = true;
}
  getdata() {
  alert("Hi click works now...")
}

}

@NgModule({
imports: [CommonModule],
declarations: [DynamicComponent],
})
class DynamicComponentModule {}

return DynamicComponentModule;
}

by following above code i can get click event to work, but im getting error if content has ion tags,
Ex: if is present in html content then im getting below error

Uncaught (in promise): Error: Template parse errors
’ion-label’ is not a known element:

If ‘ion-label’ is an Angular component, then verify that it is part of this module.
If ‘ion-label’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

[ERROR ->]Toggle

"): ng:///DynamicComponentModule/DynamicComponent.html@13:2
’ion-toggle’ is not a known element:
If ‘ion-toggle’ is an Angular component, then verify that it is part of this module.
If ‘ion-toggle’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

Toggle
[ERROR ->]

"): ng:///DynamicComponentModule/DynamicComponent.html@14:2
’ion-item’ is not a known element:

If ‘ion-item’ is an Angular component, then verify that it is part of this module.
If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. (“
Get data

[ERROR ->]
Toggle

”): ng:///DynamicComponentModule/DynamicComponent.html@12:0
’ion-label’ is not a known element:
If ‘ion-label’ is an Angular component, then verify that it is part of this module.
If ‘ion-label’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

[ERROR ->]Checkbox "): ng:///DynamicComponentModule/DynamicComponent.html@18:2 'ion-checkbox' is not a known element: 1. If 'ion-checkbox' is an Angular component, then verify that it is part of this module. 2. If 'ion-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" Checkbox [ERROR ->]

"): ng:///DynamicComponentModule/DynamicComponent.html@19:2
’ion-item’ is not a known element:

If ‘ion-item’ is an Angular component, then verify that it is part of this module.
If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

[ERROR ->]
Checkbox

"): ng:///DynamicComponentModule/DynamicComponent.html@17:0
Error: Template parse errors:
‘ion-label’ is not a known element:

If ‘ion-label’ is an Angular component, then verify that it is part of this module.
If ‘ion-label’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

[ERROR ->]Toggle

"): ng:///DynamicComponentModule/DynamicComponent.html@13:2
’ion-toggle’ is not a known element:
If ‘ion-toggle’ is an Angular component, then verify that it is part of this module.
If ‘ion-toggle’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

Toggle
[ERROR ->]

"): ng:///DynamicComponentModule/DynamicComponent.html@14:2
’ion-item’ is not a known element:

If ‘ion-item’ is an Angular component, then verify that it is part of this module.
If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. (“
Get data

[ERROR ->]
Toggle

”): ng:///DynamicComponentModule/DynamicComponent.html@12:0
’ion-label’ is not a known element:
If ‘ion-label’ is an Angular component, then verify that it is part of this module.
If ‘ion-label’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

[ERROR ->]Checkbox "): ng:///DynamicComponentModule/DynamicComponent.html@18:2 'ion-checkbox' is not a known element: 1. If 'ion-checkbox' is an Angular component, then verify that it is part of this module. 2. If 'ion-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" Checkbox [ERROR ->]

"): ng:///DynamicComponentModule/DynamicComponent.html@19:2
’ion-item’ is not a known element:

If ‘ion-item’ is an Angular component, then verify that it is part of this module.
If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

[ERROR ->]
Checkbox

"): ng:///DynamicComponentModule/DynamicComponent.html@17:0
at syntaxError (vendor.js:80600)
at TemplateParser.parse (vendor.js:91843)
at JitCompiler._compileTemplate (vendor.js:106039)
at vendor.js:105958
at Set.forEach ()
at JitCompiler._compileComponents (vendor.js:105958)
at vendor.js:105859
at t.invoke (polyfills.js:3)
at Object.onInvoke (vendor.js:4247)
at t.invoke (polyfills.js:3)
at syntaxError (vendor.js:80600)
at TemplateParser.parse (vendor.js:91843)
at JitCompiler._compileTemplate (vendor.js:106039)
at vendor.js:105958
at Set.forEach ()
at JitCompiler._compileComponents (vendor.js:105958)
at vendor.js:105859
at t.invoke (polyfills.js:3)
at Object.onInvoke (vendor.js:4247)
at t.invoke (polyfills.js:3)
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:4238)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at e.invokeTask [as invoke] (polyfills.js:3)
at p (polyfills.js:2)
defaultErrorLogger @ vendor.js:1377

pls help me in this

YehephetM · April 1, 2019, 4:20pm

Been over 1 years and nobody replied you… i am gonna reply because someone may needs it.
So if the problem is only to bind attributes or anything else to the ion-content tags, normally you will get a cross-site scripting warning and your application will be vulnerable to cross-site scripting attacks.To fix that, you need to import DomSanitizer from @angular/platform-browser and inject it through a constructor. modify this code below from angular website to suit your need.
constructor(private sanitizer: DomSanitizer) {
// javascript: URLs are dangerous if attacker controlled.
// Angular sanitizes them in data binding, but you can
// explicitly tell Angular to trust this value:
this.dangerousUrl = ‘javascript:alert(“Hi there”)’;
this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);