i create a dashboard in which i want to display key value values in a component. i get these values through an environment.ts file. this all works as i imagine. now i want to change the positions of the individual testcard components. i no longer want them to be positioned next to each other but instead achieve the following postioning in the mockup
i am new to angular and am not sure if i can create this using the ng container and just adjust the positioning of the divs here.
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
}
]
}
hmtl wher i use the component:
<ng-container *ngFor="let config of config?.content" >
<test-card *ngIf="!config.id"
[config]="config"
[entity]="boxes[config?.key]"
></test-card>
</ng-container>
test-card (component) html:
<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>
what output i got yet:
CodePudding user response:
This can be done in pure css. Based on this answer.
See below:
grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
grid-gap: 10px;
}
grid_item:nth-of-type(3n 1) {
grid-column:span 2;
grid-row:span 2;
}
/* non-essential decorative styles */
grid_item {
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
<grid-container>
<grid_item>A</grid_item>
<grid_item>B</grid_item>
<grid_item>C</grid_item>
<grid_item>D</grid_item>
<grid_item>E</grid_item>
<grid_item>F</grid_item>
</grid-container>