title: Angular 2 Generate Class Name Based on ngFor Index
body: <p>I'm running into a problem with creating a dynamic class name based on the Angular 2 ngFor loop index. I had to use the following syntax because Angular 2 does not like ngFor and ngIf on the same element.</p>
  
  <p>With this syntax, how can I create a dynamic class name with the value of index at <code>{{index}}</code>. I know this isn't proper A2 code, but I put it in my code example to show you where I would like the value to appear.</p>
  
  <pre><code>&lt;div class="product-detail__variants"&gt;
      &lt;template ngFor #variant [ngForOf]="variants" #index="index"&gt;
          &lt;div *ngIf="currentVariant == index"&gt;
              &lt;div class="product-detail-carousel-{{index}}"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The value "variants" is an empty array of a set length. "variant" thus has no value.</p>
  
  <p>"currentVariant" is a number that by default equals 0.</p>
  
  <p><strong>EDIT</strong>: This code above is correct. I had another extraneous error that I thought was connected to this code.</p>