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:

I tried some things like this :

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

MrMaavin · Accepted Answer · 2019-02-13 09:11:53Z

4

You could try something like this -

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

For more ways -

MrMaavin

1,7572 gold badges22 silver badges33 bronze badges

answered Feb 13, 2019 at 9:05

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oh god I knew this was so simple .. Thank you @Pardeep !

veben · Accepted Answer · 2019-02-13 09:12:53Z

3

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>

answered Feb 13, 2019 at 9:10

veben

22.7k15 gold badges70 silver badges85 bronze badges