title: Angular- Is it possible to use content projection from within a child component?
body: <p>NOTE- I realize this example could much more easily be done without using content projection.  I am using it as a very simplified example.</p>
  
  <p>Lets say I have the following component that lists of names in two different elements:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-name-list',
    templateUrl: `
    &lt;div class='large'&gt;
      &lt;h1&gt;Large Names&lt;/h1&gt;
      &lt;ng-content select="large"&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
    &lt;div class='small'&gt;
      &lt;h1&gt;Small Names&lt;/h1&gt;
      &lt;ng-content select="small"&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  `,
    styleUrls: ['./name-list.component.css']
  })
  export class TestNgContentComponent {
    constructor() { }
  }
  </code></pre>
  
  <p>I can then call this component from a template with two lists of names as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-names-list&gt;
    &lt;h1 ngProjectAs="large" *ngFor="let n of names"&gt;{{ n }}&lt;/h1&gt;
    &lt;h2 ngProjectAs="small" *ngFor="let n of names"&gt;{{ n }}&lt;/h2&gt;
  &lt;/app-names-list&gt;
  </code></pre>
  
  <p>Notice that the same data is used for both lists of names.  Is it possible to replace the passed h1 and h2 tags, with a component that contains both, and projects them to the parent?  E.g. something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-name',
    template: `
      &lt;h1 ngProjectAs="large"&gt;{{name}}&lt;/h1&gt;
      &lt;h2 ngProjectAs="small"&gt;{{name}}&lt;/h2&gt;
    `,
    styles: [`h1 { font-family: Lato; }`]
  })
  export class HelloComponent  {
    @Input() name: string;
  }
  </code></pre>
  
  <p>and then modify the template to look like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-names-list&gt;
    &lt;app-name *ngFor="let n of names" [name]="n"&gt;&lt;/app-name&gt;
  &lt;/app-names-list&gt;
  </code></pre>
  
  <p>Once I embed the <code>ngProjectAs</code> directives in the <code>app-name</code> template, this no longer works.  Is there a way to do a projection like this from within a child component?</p>