Add css class name with a TS property Angular 7

Question

I'm having an issue with a simple thing I guess ...

I just need my span tag to have a class named store in a variable from my .ts file :

<span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span>

I tried some things like this :

<span [ngClass]="{'flag-icon': true, ${lang.codeIcon}: true}"></span>

<span [ngClass]="{'flag-icon': true, lang.codeIcon: true}"></span>

I'm sure the answer is very simple... Does someone knows how to make it ?

Answer 1

You could try something like this -

<span [ngClass]="['flag-icon', lang.codeIcon]"></span>

For more ways -

• Angular -NgClass

Answer 2

To use the css class stored in lang.codeIcon , do like that:

<span [ngClass]="lang.codeIcon"></span>

For many classes, use an array:

<span [ngClass]="[lang.codeIcon, 'flag-icon']"></span>

For conditionnal, use braces:

<span [ngClass]="{'flag-icon': booleanVar, lang.codeIcon: !booleanVar}"></span>