Binding on an html element in angular from a string generated html

Question

I get given a JSON file and within that there is a property called html and this property looks like:

[
    {
        "id":"1",
        "question": "Who is reporting the claim?",
        "html": "<input type='text' [value]='text'>"
    }
]

I get the JSON and in the component I have a variable called html which is like below:

export class AppComponent implements OnInit {

  html: string;
  text: string;
}

On the ngInit function, I get the JSON and set the html variable to the HTML in the file.

ngOnInit() {
    this._appService.getQuestions().subscribe(response => {
      this.html = response[0].html;
    });  
  }

This then binds to the view like so:

<div class="row" [innerHTML]='html | safeHtml'></div>

Now my question is the Input that was generated through the JSON file, how do I bind the value of that to text? As the current implementation does not work.

why not use *ngif rather than dynamically setting html content? — TruckDriver, Oct 27 '17 at 11:35
@Timothy Sorry. Do you have an example of this for me to look at. There could be a number of questions and answers that are different in design. — Ben Clarke, Oct 27 '17 at 11:37
Angular-specific markup is not processed for dynamically added content. Angular compiles a template only when you build your application. There is a way to compile a component at runtime https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2 — Günter Zöchbauer, Oct 27 '17 at 11:39
@GünterZöchbauer Ahh, So my string cannot contain a bound property? — Ben Clarke, Oct 27 '17 at 11:46

Binding on an html element in angular from a string generated html

0 Answers0