How can I dynamically import an SVG file based on the user's role, whether they are an admin or a regular user?
Currently, my code in layout.ts looks like this:
<div class="layout-body h-100 ">
<ng-container [ngTemplateOutlet]="svgBuilding"></ng-container>
</div>
<svg version="1.1" id="Layer_1" class="h-100 w-100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1035.8 534.8"
style="enable-background:new 0 0 1035.8 534.8;" xml:space="preserve">
<style type="text/css">
g.building {
fill: #FFFFFF;
}
g.building:hover {
fill: #e2e2e2 !important;
cursor: pointer;
}
// More styling properties for various elements...
</style>
<g id="building_a" class="building" (click)="openBuilding('BLDGA')">
<path class="st0" d="M306.3,171.4v62.7H166.1v-1.8c-0.7,0-1.7,0.8-2,1.1v0.8H114c0.4,0.9,0.6,1.9-0.1,1.8c-1-0.2-1.3-1.2-1.3-1.8
h-10.3v-62.7h23.9v-0.1h43.1v0.1h14.4v-7.7h46.7v7.7h75.9V171.4z" />
<foreignObject x="240" y="170" width="75px" height="50px" style="position:relative;">
<xhtml:div xmlns="http://www.w3.org/1999/xhtml">
<div *ngIf="count('BLDGA')">
<div class="mechanic">
<nz-badge [nzCount]="mechCount('BLDGA') || 0">
<img src="./assets/images/room/room.png" width="45px" height="35px" />
</nz-badge>
</div>
</div>
</xhtml:div>
</foreignObject>
.....
....
...
..
</svg>
I have multiple SVG files and I'm looking to simplify the code in layout.ts by creating a function that dynamically imports the appropriate SVG file based on the user's role.
For example, one SVG is intended for admins only, another for advisors, and another for students.
SVG1 - Admin SVG2 - Advisor SVG3 - Student