Angular2 innerHtml binding breaks data binding

Question

I am trying to bind to innerHtml while keeping data binding. This does not work (outputs {{myVar}}).

@Component({
  selector: \"test\",
  template: `
    <         


        

Answer 1

Angular2 doesn't process HTML added dynamically, therefore {{}}, [], (), ... isn't supposed to work. Also no components or directives are created, even when HTML added this way matches their selectors.

Only markup added statically to components template are processed.

Equivalent of $compile in Angular 2 demonstrates an approach if you really need it.