Angular 2 render components inside ngFor

Question

So I have tabs on one of my components. Each tab I put in their own component namely TabOneComponent...TabTenComponent. Then to display them I decided to put them in an array inside the component that will render them like this:

tabs: Array<any> = [
  {label: 'Tab One', id: 'tabone', class: 'active', template: '<tab-one></tab-one>'}
  ...
  {label: 'Tab Ten', id: 'tabten', template: '<tab-ten></tab-ten>'}
]

Then to displayed them I created an ngFor like this:

<div class='tab-content'>
   <div *ngFor="let t of tabs" class='tab-pane {{ t.class }}' id='{{ t.id }}' [innerHTML]="t.template | htmlSanitizer">
   </div>
<div>

Note: htmlSanitizer is a pipe I created and it's working.

The problem here is the template of each of the component doesn't render. So is it possible to do it or do I really need to put then individually like:

<div class="tab-pane active" id="tabone">
  <tab-one></tab-one>
</div>
...
<div class="tab-pane" id="tabten">
  <tab-ten></tab-ten>
</div>

Thanks in advance!

Edit

When I Inspect in Chrome under elements tab, I see that <tab-one></tab-one> to <tab-ten></tab-ten> is actually there it just doesn't render the actual component template.

Answer 1

see if this works.

<div class="tab-content">

    <div *ngFor="let t of tabs">
        <div [attr.class] = "t.class tab-pane"
             [attr.id]    = "t.id"
             [innerHTML]  = "t.template | htmlSanitizer">
        </div>
    </div>

</div>