0

i'm trying to inject raw input html in component

<input [(ngModel)]='person.firstName' />

i was following DomSanitizer guide on :In RC.1 some styles can't be added using binding syntax

So far it injects html, but model binding breaks...

this is my dummy.component.html:

  <div *ngFor="let comp of myinputs">
    <div [innerHTML]="comp | safeHtml"></div>

  </div>

and dummy.component.ts

export class DummyForm {
    @Input() formName: string;
    myinputs: string[]; 
    Inputs: DummyRenderClass[];

    person = {
        firstName: "Tom",
        lastName: "Hanks",

    };


    constructor() {
        this.GenerateInputs();
    }

    GenerateInputs(): void {
        for (var i = 0; i < this.Inputs.length; i++){
            var component = this.Inputs[0].Component;
            this.myinputs.push(component);
        }
    }
}

Inputs[0].Component is string with html code

It generates input field,but it wont bind to model. Any ideas on binding?

damatano
  • 71
  • 11
  • Angular doesn't process HTML added using `[innerHTML]` in any way (except sanitization for security purposes). You won't be able to get components instantiated, value or event-bindings be evaluated for HTML added this way. Such things work **only** if added statically to a components template. If you need this, you can create a component at runtime like explained in https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular/38888009#38888009 – Günter Zöchbauer Aug 23 '17 at 14:15
  • 1
    thank you :) -@GünterZöchbauer – damatano Aug 24 '17 at 06:40

0 Answers0