title: Embedding an Angular Directive in <tr>
body: <p>I'm trying to get an angular directive to repeat inside a <code>&lt;tr&gt;</code>. Without the directive, the code is</p>
  
  <pre><code>&lt;tr *ngFor='let cluster of clusters'&gt;
      &lt;td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'&gt;
          &lt;span&gt;{{ cluster.Name }}&lt;/span&gt;
          &lt;span&gt;{{ cluster.StatusMessage }}&lt;/span&gt;
      &lt;/td&gt;
      &lt;td style='width: 100%;'&gt;
          ...
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>And looks like</p>
  
  <p><a href="https://i.stack.imgur.com/BuGV8.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BuGV8.gif" alt="enter image description here"></a></p>
  
  <p>When I refactor the directive, I lose the <code>&lt;tr&gt;</code> formatting. The refactored code is</p>
  
  <pre><code>&lt;tr *ngFor='let cluster of clusters'&gt;
      &lt;cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'&gt;&lt;/cluster-row&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The cluster-row component code is:</p>
  
  <pre><code>&lt;td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'&gt;
      &lt;span&gt;{{ name }}&lt;/span&gt;
      &lt;span&gt;{{ statusMessage }}&lt;/span&gt;
  &lt;/td&gt;
  &lt;td style='width: 100%;'&gt;
      ...
  &lt;/td&gt;
  </code></pre>
  
  <p>It works, but the <code>&lt;tr&gt;</code> formatting goes away.</p>
  
  <p><a href="https://i.stack.imgur.com/XpQFp.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XpQFp.gif" alt="enter image description here"></a></p>
  
  <p>The developer tools show a <code>&lt;tr&gt;</code> with a <code>&lt;cluster-row&gt;</code> nested in it, and two <code>&lt;td&gt;</code>s nested in that, as I would expect.</p>