Add sibling logic in ngFor

Question

I have a table in angular template, the rows of which are generated by iteration over an object using ngFor directive.Example code:

<table *ngIf="results.length > 0" class="table table-hover">
  <thead>
    <tr>
      <th class="col-md-1">ID</th>
      <th class="col-md-3">Code</th>
      <th class="col-md-2">Type</th>
      <th class="col-md-4">Value(s)</th>
      <th class="col-md-2"><b class="invisible">.</b></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let r of results">
      <td class="col-md-1">{{r.id}}</td>
      <td class="col-md-3">{{r.code}}</td>
      <td class="col-md-2">{{r.type}}</td>
      <td class="col-md-4">{{r.values}}</td>
      <td class="col-md-2">
        <button (click)="add(r.id)">Add</button>
      </td>
    </tr>

    <tr class="hidden"> // <----- The following lines needs to repeat for all iterations
      <td colspan="5">
        // Some other code
      </td>
    </tr>
  </tbody>
</table>

My purpose is to get a complete row just below each row that gets generated by ngFor, so that on click of button on each row, I can show the respective row just below the row that contains the button.

Is this possible to achieve in a simple way?

I havent tested it but i think you can achieve the desired result using a `` as explained in this answer http://stackoverflow.com/questions/36376006/create-two-elements-for-a-single-ngfor-iteration#36376185 — FabioG, Apr 18 '17 at 13:28
@FabioG Ok that works. Thank You. ( Hell !! I'm new to Angular ;-) ) — Abhi, Apr 18 '17 at 13:32

score 5 · Accepted Answer · answered Apr 18 '17 at 13:33

5

use ng-container like:

<ng-container *ngFor="let r of results">
  <tr>...</tr>
  <tr>...</tr>
</ng-container>

answered Apr 18 '17 at 13:33

Julia Passynkova

17,256
6
33
32

Accepting the answer, but I feel, a bit of explanation would have made this answer more useful. – Abhi Apr 18 '17 at 13:38
1

you can read about structural-directives at https://angular.io/docs/ts/latest/guide/structural-directives.html – Julia Passynkova Apr 18 '17 at 13:44

unitario · Answer 2 · 2017-04-18T13:37:49.183

0

You should be able to do this and the table should still render fine:

<table *ngIf="results.length > 0" class="table table-hover">
  <thead>
    <tr>
      ...
    </tr>
  </thead>
  <tbody>
    <div *ngFor="let r of results">
      <tr>
        ...
      </tr>
      <tr class="hidden">
        ...
      </tr>
    </div>
  </tbody>
</table>

Or rather the schematically correct version provided in the other answer.

edited Apr 18 '17 at 13:37

answered Apr 18 '17 at 13:34

unitario

6,295
4
30
43

Well it works, but I'm getting some styling problems with this approach. So, I would go with @FabioG's suggestion and use `` – Abhi Apr 18 '17 at 13:37

Add sibling logic in ngFor

2 Answers2