1

i am trying to build dynamic tabs, so i decided to use the Transclusion approach of ng-content but i am not able to get the object from the ngFor loop. this is my code

<div class="tab-pane internal-tab active">
  <ul class="nav nav-tabs">
    <li [ngClass]="{'active':i===0}" *ngFor='let _t of Headers; let i = index'>
      <a href="#{{_t}}" role="tab" data-toggle="tab">{{_t}}</a></li>
  </ul>
  <div class="tab-content">
    <div *ngFor='let _t of Headers; let i = index' [ngClass]="{'active':i===0}" class="tab-pane" id="{{_t}}">
      <ng-content select="[one]">
      </ng-content>     
    </div>
  </div>
</div>

this is my stackblitz url

so here, instead of this

 <ng-content select="[one]">
 </ng-content>

if i try to use the object of the ngFor loop like this, 

<ng-content select="[_t]">
</ng-content>

i get error and i am not able to use the object

i tried all this variants to use the object but i am not successfull

 1. <ng-content select="['_t']">
 2. <ng-content select="['"_t"']">
 3. <ng-content select="['"_t"']">
 4. <ng-content select="[{{_t}}]">
Lijin Durairaj
  • 4,910
  • 15
  • 52
  • 85
  • 2
    It's not possible to set the `select` from `ng-content` dynamically. See this [github issue](https://github.com/angular/angular/issues/8563) for more info on why. For a working implementation with dynamic tabs you can look [here](https://codecraft.tv/courses/angular/components/content-projection/) – Korfoo May 07 '19 at 12:25

0 Answers0