My goal is to dynamically load a part of my website, specifically by using icon classes defined in the interface like this:
import { OpaqueToken } from "@angular/core";
import {IAppConfig} from './app.interface'
export let APP_CONFIG = new OpaqueToken("app.config");
export const AppConfig: IAppConfig = {
employee:"circular tabbaricon users icon",
employee1:"circular tabbaricon users icon"
....etc
};
Here is the interface:
export interface IAppConfig {
employee:string;
employee1:string;
}
I am importing this into my component using
constructor( @Inject(APP_CONFIG) private config: IAppConfig) { }
Now, I need to display data dynamically using ngFor based on the link name with the appropriate icon. Here's how I am attempting to do so:
<div class="ui column" *ngFor="let x of funtionalities.routeLinks ">
<i class={{config+'.'+x.linkName}} id="iconBack"></i>
</div>I want to achieve displaying the icons like this:
<i class={{config.x.linkName}}></i>
Is there a way to accomplish this or another method that would work better? Any help is appreciated.