We currently have a system in place that is dependent on a numeric value being set to either 1 or 2 in order to display specific icons. This method is functional.
<span *ngIf="config.icon"
[class.fas]="true"
[class.fa-plus]="icon===1"
[class.fa-minus]="icon===2"
class="indicator">
</span>
I anticipate that we may soon need to incorporate around 15 different icons into our system. The options presented are to add 15 lines of code with specific class assignments for each icon, or create a specialized component to manage the icons.
I am reluctant to choose either option, as my attempts to implement them failed and my search efforts yielded irrelevant results. This could be due to my own lack of expertise in identifying valuable information.
Is there a way to achieve something similar to the following pseudocode? How can this be accomplished?
[class.fa-{{iconName}}]="true"
[class]="iconName"
edit
After considering the comments and answers provided, I was able to make it work using the following syntax.
<span *ngIf="config.icon"
[ngClass]='{ "fas": true, "fa-plus": true }'></span>
However, I am facing issues with getting any output when using the syntax below.
<span *ngIf="config.icon"
[ngClass]="classes"></span>
...
classes: { "fas": true, "fa-plus": true };
What am I overlooking?