0

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.

Jed
  • 1,054
  • 1
  • 15
  • 34
  • check out http://stackoverflow.com/questions/33472297/how-to-translate-html-string-to-real-html-element-by-ng-for-in-angular-2 – Dan Apr 17 '17 at 04:21
  • make sure you've declared your pipe in your component – Dan Apr 17 '17 at 04:23
  • See this answer http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – yurzui Apr 17 '17 at 05:23

1 Answers1

0

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>
Optiq
  • 2,835
  • 4
  • 33
  • 68
  • No it doesn't. What's the purpose of changing the class and id into angular attributes? They work fine even just using the normal HTML class and id. It's the innerHTML that doesn't work. Please see my updated post. – Jed Apr 17 '17 at 08:26