title: How to render nested ng-template
body: <p>I have such nested <code>ng-template</code> structure.</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;list&gt;
        &lt;ng-template *ngFor="let item of Items" #ListItem&gt;
          &lt;ng-template #ListItemLine&gt;{{ item[0] }}&lt;/ng-template&gt;
          &lt;ng-template #ListItemLine&gt;{{ item[1] }}&lt;/ng-template&gt;
          &lt;ng-template #ListItemLine&gt;{{ item[2] }}&lt;/ng-template&gt;
          I can see this line, but can't get above templates
        &lt;/ng-template&gt;
      &lt;/list&gt;
    `,
  })
  export class App {
    Items: Array&lt;Array&lt;string&gt;&gt; = [
      [ "1-1", "1-2", "1-3", ],
      [ "2-1", "2-2", "2-3", ],
      [ "3-1", "3-2", "3-3", ],
      [ "4-1", "4-2", "4-3", ],
      [ "5-1", "5-2", "5-3", ],
    ]
  }
  </code></pre>
  
  <p>How can I render children <code>ng-component</code> in my component:</p>
  
  <pre><code>@Component({
    selector: 'list',
    template: `
      &lt;ul&gt;
        &lt;li *ngFor="let item of Items"&gt;
          &lt;ng-container *ngTemplateOutlet="item"&gt;&lt;/ng-container&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    `,
  })
  export class ListComponent {
  
    @ContentChildren('ListItem') public Items;
  
  }
  </code></pre>
  
  <p>Plunkr <a href="https://plnkr.co/edit/Hi1ZqPAAYyIbclUuzRrl?p=preview" rel="noreferrer">https://plnkr.co/edit/Hi1ZqPAAYyIbclUuzRrl?p=preview</a></p>
  
  <p>Thank you in advance.</p>
  
  <p><strong>Update</strong></p>
  
  <p>At the end I want to wrap Angular Material components into my components, so if I would find a btter UI than Material, I shouldn't have to change all accurances of Material components in my program, I would just need to change implementation of my wrapper UI components.</p>
  
  <p>For exmple let's try to wrap <code>mat-list</code> component. I need to make a wrapper for <code>mat-list</code> container, let's call it <code>my-list</code>:</p>
  
  <pre><code>@Component({
    selector: 'my-list',
    template: `
      &lt;mat-list&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/mat-list&gt;
    `,
  })
  </code></pre>
  
  <p>and a wrapper for <code>mat-list-item</code>:</p>
  
  <pre><code>@Component({
    selector: 'my-list-item',
    template: `
      &lt;mat-list-item&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/mat-list&gt;
    `,
  })
  </code></pre>
  
  <p>The HTML render result would be:</p>
  
  <ul>
  <li>my-list
  
  <ul>
  <li>mat-list
  
  <ul>
  <li>my-list-item
  
  <ul>
  <li>mat-list-item</li>
  </ul></li>
  <li>...</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>Each Material component surrounded by my wrapper, so directives and styles which come with Material will not work.</p>