Angular grid layout behaviour

I am new to using angular.

When using a grid layout I am not getting what I want. To debug I created the following element:

<div *ngFor=" let tableVersionHeader of tableVersion.xAxis.tableVersionHeaders"
class="grid-cell text"
[ngStyle]="{
'height': 'auto',
'text-align': 'center !important',
'border': '1px solid black',
'padding': '8px',
'grid-column': tableVersionHeader.columnIndex + 2 + ' / span ' + tableVersionHeader.breadth,
'grid-row': tableVersionHeader.level + ' / span ' + ((tableVersionHeader.children!.length === 0 || !tableVersionHeader.isAbstract)) ? (tableVersion.xAxis.rowCount - (tableVersionHeader.level ?? 0)) : 1
}">
<p>{{tableVersionHeader.headerVersion?.code}} - {{tableVersionHeader.headerVersion?.label}}</p>
<p>grid-column: {{tableVersionHeader.columnIndex + 2}} / span {{tableVersionHeader.breadth}}</p>
<p>grid-row: {{tableVersionHeader.level}} / span {{((tableVersionHeader.children!.length === 0 || !tableVersionHeader.isAbstract)) ? (tableVersion!.xAxis.rowCount - (tableVersionHeader.level ?? 0)) : 1}}</p>
</div>


As you can see I am printing the values that I expect for grid-column and grid-row in my divs.

My output is e.g.:

0008 - Internal rating scale

grid-column: 2 / span 1

grid-row: 1 / span 1


While the style set on the element is:

height: auto;
border: 1px solid black;
padding: 8px;
grid-area: 3 / 2 / auto / span 1;


Somehow angular (?) rewrites the grid-column and grid-row values to grid-area but not in the correct manner.

I could not find a reference why angular is doing that and how to stop it. I double checked with Firefox and Chrome, both show the same behaviour.

Thanks for your help in advance.

Continue reading...