htmlcssangularsasscss-grid

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.

Edit: Stackblitz example code https://angular-3plybjxk.stackblitz.io


Solution

  • The problem was the brackets were missing, which might have caused the miscalculation.

    <div *ngFor="let tableVersionHeader of tableVersion.xAxis.tableVersionHeaders"
        class="grid-cell text"
        style="height:auto;text-align:center !important; border: 1px solid black;padding:8px;"
        [ngStyle]="{
          '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),
        }"
        >
    

    Full Code:

    <div *ngIf="tableVersion && tableVersion.xAxis" class="overflow-auto">
      <div class="grid-container"
            [style.display] = "'grid'"
            [style.grid-template-columns] = "'25% repeat(' + tableVersion!.xAxis!.columnCount + ', minmax(200px, 300px))'"
            [style.grid-template-rows] = "' repeat(' + tableVersion!.xAxis!.rowCount + ', 1fr)'"
          >
    
        <div class="grid-cell"
              [style.height]= "'auto'"
              [style.border]= "'1px solid black'"
              [style.padding]= "'8px'"
              [style.grid-column]= "'1 / span 1'"
              [style.grid-row] = "'1 / span ' + tableVersion!.xAxis!.rowCount"
        ></div>
    
        <div *ngFor="let tableVersionHeader of tableVersion.xAxis.tableVersionHeaders"
            class="grid-cell text"
            style="height:auto;text-align:center !important; border: 1px solid black;padding:8px;"
            [ngStyle]="{
              '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>
      </div>
    </div>
    

    Stackblitz Demo