Why don't add the ngClass the class parameter to the html tag, but the condition is true in Angular template?

Question

I have this code in my Angular template:

<div *ngFor="let name of product.names; let index of index" [ngClass]="{'text-muted': index === 0}">
  {{ name.value }}
</div>

Then it's generate this HTML code in browser for the first element of names array:

<div _ngcontent-drs-c6="" ng-reflect-ng-class="[object Object]"> Test </div>

Why don't add the class parameter to the div if the condition is true? Where is the mistake in this code?

Answer 1

Try with let i = index"

<div *ngFor="let name of product.names; let i = index" [ngClass]="{'text-muted':  i === 0}">
    {{ name.value }}
</div>

Working Demo