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: `
    <div [innerHtml]="myHtml"></div>
  `,
})
export class TestComponent{
  title = "My Title";
  myHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer){
    this.myHtml = sanitizer.bypassSecurityTrustHtml("<h1>{{title}}</h1>");
  }
}

In my real app, myHtml is the content of an SVG file (which is why I need to bypassSecurityTrustHtml) and often changes, so that I cannot put it in my template (it could come from 20 different SVG files).

If there was a way to dynamically set the templateUrl for the component, it would also solve my problem, but after searching for quite a while it does not seem possible.

score 3 · Accepted Answer · edited May 23 '17 at 11:46

3

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.

edited May 23 '17 at 11:46

Community

1
1

answered Oct 27 '16 at 08:50

Günter Zöchbauer

623,577
216
2,003
1,567

2

Your link seems to be what I was looking for, thanks (for this and the hundred other Angular2 questions you've answered and that helped me) – maxbellec Oct 27 '16 at 09:04

Angular2 innerHtml binding breaks data binding

1 Answers1

Linked