Angular2: replace host element with component's template
<p>I'm new to <code>angular</code> in general and to <code>angular2</code> specifically. I'm trying to write a container component, which should have child components in it. </p>

<p><strong>For example, container component</strong>:</p>

<pre class="lang-typescript prettyprint-override"><code>@Component({
  selector: 'my-list',
  template: `
    &lt;ul&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/ul&gt;
  `
})
export class MyList {
}
</code></pre>

<p><strong>Child component:</strong></p>

<pre class="lang-typescript prettyprint-override"><code>import { Component } from 'angular2/core'

@Component({
  selector: 'my-item',
  template: `
    &lt;li&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/li&gt;
  `
})
export class MyItem {
}
</code></pre>

<p>I'd like to make this structure:</p>

<pre class="lang-html prettyprint-override"><code>&lt;my-list&gt;
    &lt;my-item&gt;One&lt;/my-item&gt;
    &lt;my-item&gt;Two&lt;/my-item&gt;
&lt;/my-list&gt;
</code></pre>

<p>To be rendered to the following one:</p>

<pre class="lang-html prettyprint-override"><code>&lt;my-list&gt;
    &lt;ul&gt;
        &lt;li&gt;One&lt;/li&gt;
        &lt;li&gt;Two&lt;/li&gt;
    &lt;/ul&gt;
&lt;/my-list&gt;
</code></pre>

<p>But instead, I have the host element of the container and the items preserved as well:</p>

<pre class="lang-html prettyprint-override"><code>&lt;my-list&gt;
    &lt;ul&gt;
        &lt;my-item&gt;
            &lt;li&gt;One&lt;/li&gt;
        &lt;/my-item&gt;
        &lt;my-item&gt;
            &lt;li&gt;Two&lt;/li&gt;
        &lt;/my-item&gt;
    &lt;/ul&gt;
 &lt;/my-list&gt;
</code></pre>

<p><a href="https://plnkr.co/edit/um5BC7?p=preview" rel="noreferrer">Plunk is available here</a></p>

<p><strong>Question:</strong> is there a way to eliminate the host elements and to leave only the rendered template?</p>