Use ngFor scoped variable as variable in ngClass for className

Question

what i'm trying to achieve is to change class dynamically using the value of the ngFor scoped variable as the class of the label.Here's my code:

 <ul formArrayName="pokeTypes">
            <li [formGroup]="nestedForm" *ngFor="let type of this.createListOfTypes()|async; let i = index">
                <!-- add style!  -->
                <input type="checkBox" [id]='type' [value]="type" [formControlName]="type"
                    (change)="onCheckStateChange($event)">
                <label [for]="type" [ngClass]="{'{{type}}': pokeTypes.controls[0].get('type').value !== null }">{{type|titlecase}}</label>
            </li>
        </ul>
```**strong text**

Answer 1

Don't use ng class for this

<label [for]="type" [ngClass]="{'{{type}}': pokeTypes.controls[0].get('type').value !== null }">{{type|titlecase}}</label>

Instead you can toggle your class like so:

class="{{ pokeTypes.controls[0].get('type').value !== null ? type : '' }}"

Or something similar.