title: Angular 2 / 4 Recursive Table row component issue
body: <p>Although the question is similar to <a href="https://stackoverflow.com/questions/39964173/angular2-table-row-component-on-chrome-displays-in-single-column">this question</a>,the case here is different.</p>
  
  <p>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.  </p>
  
  <p>And I want to display all of them as rows.</p>
  
  <p>But the component shows all the data in single column.How to map them correctly</p>
  
  <p>Logic I used</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Step No.&lt;/th&gt;
              &lt;th&gt;Step Name&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;row-detail [data]="data"&gt;&lt;/row-detail&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Row Details</p>
  
  <pre><code>&lt;ng-container *ngFor="let step of data"&gt;
      &lt;ng-template *ngIf="step.type==='group'; then group; else normal"&gt;&lt;/ng-template&gt;
      &lt;ng-template #normal&gt;
          &lt;tr&gt;
              &lt;td&gt;{{step.stepno}}&lt;/td&gt;
              &lt;td&gt;{{step.stepName}}&lt;/td&gt;
              &lt;td&gt;{{step.description}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/ng-template&gt;
      &lt;ng-template #group&gt;
          &lt;row-detail [data]="step.data"&gt;&lt;/row-detail&gt;
      &lt;/ng-template&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>plnkr code</p>
  
  <p><a href="https://plnkr.co/edit/vsD0FOpkbrWdvlycpal9" rel="nofollow noreferrer">https://plnkr.co/edit/vsD0FOpkbrWdvlycpal9</a></p>