Incorporate a CSS class name with a TypeScript property in Angular version 7

Question

Struggling with something seemingly simple...

All I need is for my span tag to take on a class called "store" from a variable in my .ts file:

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

I've attempted solutions like these:

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

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

This should be an easy fix... Any ideas on how to achieve this?

Answer 1

Answer №1

If you want to experiment with a different approach, consider the following code snippet:

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

To explore additional methods and possibilities, check out:

Answer 2

If you want to experiment with a different approach, consider the following code snippet:

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

To explore additional methods and possibilities, check out:

Answer 3

If you want to utilize the css class that is stored in lang.codeIcon, here's how you can do it:

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

If you have multiple classes, you can use an array like this:

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

When using conditional statements, make sure to include braces:

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

Answer 4

If you want to utilize the css class that is stored in lang.codeIcon, here's how you can do it:

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

If you have multiple classes, you can use an array like this:

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

When using conditional statements, make sure to include braces:

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