Q:

Add sibling logic in ngFor

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?

A:

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

