title: creating sub table row under a table row
body: <p>I have a dynamic table that iterates on some data:</p>
  
  <pre><code>&lt;table&gt;
   &lt;tbody&gt;
    &lt;tr *ngFor="let row of data; let i = index"&gt;
     &lt;td (click)="addSubRow(row, i)"&gt; + &lt;/td&gt;
     &lt;td&gt;{{row.name}}&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to add under each <code>tr</code> a sub row, that in my case will contain a dynamic component:</p>
  
  <pre><code>&lt;div #placeholder&gt;&lt;/div&gt;
  </code></pre>
  
  <p>best solution I've got so far is having one extra <code>td</code> and using css:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;table&gt;
   &lt;tbody&gt;
    &lt;tr *ngFor="let row of data; let i = index"&gt;
     &lt;td (click)="addSubRow(row, i)"&gt; + &lt;/td&gt;
     &lt;td&gt;{{row.name}}&lt;/td&gt;
     &lt;td&gt;&lt;div #placeholder&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>tr {
    display: inline-flex;
    flex-wrap: wrap;
  }
  td {
    flex: 1;
    text-align: center;
  }
  td:last-child {
    flex: 0 0 100%;
  }
  </code></pre>
  
  <p>making it look like a row, but its screwing with my css to much.</p>
  
  <p>option two was <a href="http://jsfiddle.net/clairesuzy/N8Y6c/" rel="nofollow noreferrer">this one</a>.</p>
  
  <p>had some other solutions but they are not in the <code>angular 2+</code> spirit.</p>
  
  <p>Would like to know the best approach for this case, and if my approach was somehow in the right direction as I'm new to the world of angular 2+. </p>