HTML code form Angular2 component property

Question

Following through the example to generate tabs view with ng2-bootstrap from http://valor-software.com/ng2-bootstrap/ , I have the following code:

<tabset>
<tab *ngFor="#tabz of tabs"
     [heading]="tabz.title"
     [active]="tabz.active"
     (select)="tabz.active = true"
     (deselect)="tabz.active = false"
     [disabled]="tabz.disabled"
     [removable]="tabz.removable"
     (removed)="removeTabHandler(tabz)">
    {{tabz?.content}}
</tab>

But I want to have HTML code to be pulled from the {{tabz?.content}} property. Is there a way to do this? My tabs array looks like this:

public tabs:Array<any> = [
{title: 'Summary View', content: 'Dynamic content 1', active: true},
{title: 'Search View', content: '<someAngularComponent>Error Displaying Entry view</someAngularComponent >'}];

Answer 1

<tabset>
<tab *ngFor="#tabz of tabs"
     [heading]="tabz.title"
     [active]="tabz.active"
     (select)="tabz.active = true"
     (deselect)="tabz.active = false"
     [disabled]="tabz.disabled"
     [removable]="tabz.removable"
     (removed)="removeTabHandler(tabz)"
     [innerHTML]="tabz?.content">
</tab>

You should be aware that Angular doesn't sanitize the HTML and doesn't process it any other way. Bindings like [] , () , {{}} , <my-comp> , <div myDirective> are ignored by Angular by HTML added this way.

Answer 2

Plain html injection:

<tab [innerHTML]="tabz?.content">

Angular2 templates/components can not be injected in the same way as above, you could wrap content into component and load it using DynamicComponentLoader triggered by (select) event.