title: Insert <tr> to <tbody> in angular 5 dynamically
body: <p>following this <a href="https://blog.thecodecampus.de/angular-2-dynamically-render-components/#comment-789" rel="nofollow noreferrer">https://blog.thecodecampus.de/angular-2-dynamically-render-components/#comment-789</a>, I was able to create the child component dynamically on click of a link. Except my parent component is </p>
  
  <p>parent.html</p>
  
  <pre><code>     &lt;table&gt;
       &lt;thead&gt;
           &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
           &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody #parent&gt;
        &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p>Child component.html:</p>
  
  <pre><code>        &lt;tr&gt;&lt;td&gt;Blue&lt;/td&gt;&lt;td&gt;23&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>Child component.ts:</p>
  
  <pre><code>       selector:"app-tr-rows";
  </code></pre>
  
  <p>Now, when the tr is inserted in the tbody, firefox inspector gives:</p>
  
  <pre><code>     &lt;app-tr-rows&gt;
             &lt;tr&gt;&lt;td&gt;Blue&lt;/td&gt;&lt;td&gt;23&lt;/td&gt;&lt;/tr&gt;
       &lt;/app-tr-rows&gt;
  </code></pre>
  
  <p>which causes all the child rows to appear on Name column only. What's the way?</p>