How to generate table rows with rowspan in angular html?

Question

I want to iterate on a data list to generate table rows but I don't know how to implement the loop when the cells in one column have a rowspan attribute.

My template markup:

<div class="table-responsive" >
  <table class="table table-striped">
    <tr>
      <th>Project Name</th>
      <th>Project Number</th>
    </tr>
    <tr>
      <td rowspan="3">{{data.name}}</td>
      <td>{{data.number1}}</td>
    </tr>
    <tr>
      <td>{{data.number2}}</td>
    </tr>
    <tr>
      <td>{{data.number3}}</td>
    </tr>
  </table>
</div>

Martin Parenteau · Accepted Answer · 2018-12-09 22:02:15Z

2

You can apply the ngFor directive to an ng-container element, and insert the group of 3 table rows inside of that container:

<div class="table-responsive">
  <table class="table table-striped">
    <tr>
      <th>Project Name</th>
      <th>Project Number</th>
    </tr>
    <ng-container *ngFor="let data of projects">
      <tr>
        <td rowspan="3">{{data.name}}</td>
        <td>{{data.number1}}</td>
      </tr>
      <tr>
        <td>{{data.number2}}</td>
      </tr>
      <tr>
        <td>{{data.number3}}</td>
      </tr>
    </ng-container>
  </table>
</div>

See this stackblitz for a demo.

answered Dec 9, 2018 at 22:02

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

leventkalayz Over a year ago

thanks, it works for me. what i am looking for is ng-container.

SiddAjmera · Accepted Answer · 2018-12-09 21:28:20Z

0

Give this a try:

<div class="table-responsive">
    <table class="table table-striped" border="1">
        <thead>
            <tr>
                <td rowspan="3">Project Name</td>
                <td>Project Number</td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of projects">
                <td>{{data.name}}</td>
                <td>
                    <tr>{{data.number1}}</tr>
                    <tr>{{data.number2}}</tr>
                    <tr>{{data.number3}}</tr>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Here's a Working Sample Stackblitz for your ref.

answered Dec 9, 2018 at 21:28

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

How to generate table rows with rowspan in angular html?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related