Angular 2 Generate Class Name Based on ngFor Index

Question

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.

With this syntax, how can I create a dynamic class name with the value of index at {{index}}. 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.

<div class="product-detail__variants">
    <template ngFor #variant [ngForOf]="variants" #index="index">
        <div *ngIf="currentVariant == index">
            <div class="product-detail-carousel-{{index}}">

            </div>
        </div>
    </template>
</div>

The value "variants" is an empty array of a set length. "variant" thus has no value.

"currentVariant" is a number that by default equals 0.

EDIT: This code above is correct. I had another extraneous error that I thought was connected to this code.

have you tried with ngClass ? angular.io/docs/ts/latest/api/common/NgClass-directive.html — Langley
My code apparently works and another extraneous error was throwing it off. This code is correct! — AJStacy

Thierry Templier Thierry Templier · Accepted Answer · 2016-01-14T08:25:03

I don't really understand your problem ;-)

There are two ways to set classes for a specific element:

The way you do with curly brackets:

@Component({
  selector: 'my-app',
  template: `
    <div class="product-detail__variants">
      <template ngFor #variant [ngForOf]="variants" #index="index">
        <div *ngIf="currentVariant == index">
          <div class="product-detail-carousel-{{index}}">
            Test
          </div>
        </div>
      </template>
    </div>
  `,
  styles: [
    '.product-detail-carousel-2 { color: red }'
  ]
})

Test is displayed only for the third element (index 2) and in red.

As suggested by @Langley using the ngClass directive

import {NgClass} from 'angular2/common';

@Component({
  selector: 'my-app',
  template: `
    <div class="product-detail__variants">
      <template ngFor #variant [ngForOf]="variants" #index="index">
        <div *ngIf="currentVariant == index">
          <div class="product-detail-carousel-{{index}}">
            Test
          </div>
        </div>
      </template>
    </div>
  `,
  styles: [
    '.product-detail-carousel-2 { color: red }'
  ],
  directives: [ NgClass ]
})

The different is that you need to specify the NgClass directive within the providers attribute of your component. Again Test is displayed only for the third element (index 2) and in red.

Your following sentences: "The value variants is an empty array of a set length. variant thus has no value. currentVariant is a number that by default equals 0.". How do you expect something to be displayed if your array is empty. An ngFor is an iteration...

Hope it helps you, Thierry

Angular 2 Generate Class Name Based on ngFor Index

2 Answers