innerHTML with variables angular2

Question

I would like to know how I can put variables inside a string and render it with Angular2 ?

Here is my code :

HTML :

<div [innerHTML]="testHTML"></div>

The variable :

public testHTML: string = "<h1>test - {{ variable[0] }}</h1>";

"variable" is an array of string, not null and containing at least 1 value.

And what I get displayed is :

test - {{ variable[0] }}

H1 is well rendered. but my variables are not interprated !

How can I solve this ?

Answer 1

You can't have any Angular specific stuff in HTML added dynamically. They all work only work when added statically to a components template.

You can create components dynamically at runtime though and add such a component using ViewContainerRef.createComponent()

See also Equivalent of $compile in Angular 2