1

Although the question is similar to this question,the case here is different.

I have an array of items which contains single item as well as group of items, which in-turn may contain item and item-group.

And I want to display all of them as rows.

But the component shows all the data in single column.How to map them correctly

Logic I used

<table border="1">
    <thead>
        <tr>
            <th>Step No.</th>
            <th>Step Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <row-detail [data]="data"></row-detail>
    </tbody>
</table>

Row Details

<ng-container *ngFor="let step of data">
    <ng-template *ngIf="step.type==='group'; then group; else normal"></ng-template>
    <ng-template #normal>
        <tr>
            <td>{{step.stepno}}</td>
            <td>{{step.stepName}}</td>
            <td>{{step.description}}</td>
        </tr>
    </ng-template>
    <ng-template #group>
        <row-detail [data]="step.data"></row-detail>
    </ng-template>
</ng-container>

plnkr code

https://plnkr.co/edit/vsD0FOpkbrWdvlycpal9

Community
  • 1
  • 1
Madhan
  • 5,750
  • 4
  • 28
  • 61
  • 1
    Problem is that the `row-detail` elements get the inherited `display: table` style from the parent table. I don't think it's possible the way you like it. Especially not with the ancient table structure. Perhaps using a table created with `flex` will get what you want – Poul Kruijt Apr 19 '17 at 13:05

0 Answers0