In developing a dashboard, I have successfully displayed key value pairs in a component by retrieving them from an environment.ts file. Now, I am looking to rearrange the positioning of the individual testcard components to align with a specific layout shown in the mockup.
https://i.sstatic.net/eURtc.png
As a newcomer to Angular, I am uncertain if I can achieve this desired layout by utilizing ng container and adjusting the divs' positions accordingly.
Snippet from environment.ts:
col: 'col-6',
title: 'test',
info: 'testinfo',
content : [
{
title: 'testvaluediv1',
key: 'testvalue',
pipe: {
name: 'number',
value: '1.0-0'
},
postFix: {
text: 'test',
},
color: 'info',
size: 'large'
},
{
title: 'testvaluediv2',
key: 'testvalue',
pipe: {
name: 'number',
value: '1.0-0'
},
postFix: {
text: 'test',
},
color: 'info',
size: 'large'
},
*// till test5
}
]
}
HTML code where the component is used:
<ng-container *ngFor="let config of config?.content" >
<test-card *ngIf="!config.id"
[config]="config"
[entity]="boxes[config?.key]"
></test-card>
</ng-container>
Template for the test-card component:
<div>
<span *ngIf="config?.preFix?.icon" [class]="'pr-2 icon '+ config?.preFix?.icon"></span>
<span>{{config?.preFix?.text}} {{entity?.value | cut}} {{config?.postFix?.text}}</span>
<span *ngIf="config?.postFix?.icon" [class]="'pl-2 icon '+ config?.postFix?.icon"></span>
</div>
<div>
<span>{{config?.title}}</span>
</div>
Current output received: