Set dynamic class based on index in angular ngFor

Question

I'm trying to set class for elements inside ngFor but changes are not reflecting as this class declaration class="car-title{{index}}" seems to be not working .

I have given equivalent colors as shown below for car title that needs to be displayed based on the index value inside ngFor.

                .car-title1 {
                    color: blue;
                }
                 .car-title2 {
                    color: red;
                }
                .car-title3 {
                    color: green;
                }

Plunker link here

Answer 1

user class binding

[class]="'car-title'+(index+1)"

Answer 2

The right way to do this is to use ngClass

*ngFor="let item of items; let i = index"

[ngClass]="'car-title'+ i"