2

I have a table with expandable rows and need to populate the expanded row when the parent row is clicked. I have tried using the following solution:

<template ngFor let-row [ngForOf]="rowsArray">
<tr class="parent-row-class">
  <td> //content </td>
</tr>
<tr class="expandable-row-class">
  <td> //display when top row clicked </>
</tr>

Aside from WebStorm flagging this syntax as being wrong, the problems with this code are:

  1. When the rows are opened then it may open a row 10 rows below the one I clicked.
  2. If I limit the rows to only a few then some rows may disappear, if the row above them is opened. This could continue until only the first and second row remain, and even then only the first expandable row will have content.

Has this syntax changed in the past few months or is there some other way to handle one or both of these problems?

Thanks in advance.

Chris Sharp
  • 2,005
  • 1
  • 18
  • 32
  • 3
    The syntax hasn't changed, but see if using `ng-container` helps clear things up. This question is a good overview of the differences between `ng-container` and `template` http://stackoverflow.com/questions/40529537/ng2-difference-between-ng-container-and-template-tags – Christopher Moore Feb 09 '17 at 22:31

1 Answers1

3

Changing <template> to <ng-container> was crucial in fixing the issue. Thanks @Christopher Moore for the suggestion.

Chris Sharp
  • 2,005
  • 1
  • 18
  • 32