title: Angular 9+: nested ng-content and ContentChildren
body: <p>I'm trying to capture the content of an outer ng-content with ContentChildren, with no luck.
  Here's the code:
  app.component.html:</p>
  <pre><code>&lt;app-table-wrapper&gt;
      &lt;app-column&gt;&lt;/app-column&gt;
      &lt;app-column&gt;&lt;/app-column&gt;
      &lt;app-column&gt;&lt;/app-column&gt;
  &lt;/app-table-wrapper&gt;
  </code></pre>
  <p>table-wrapper:</p>
  <pre><code>@Component({
    selector: 'app-table-wrapper',
    template: `&lt;p&gt;table-wrapper works!&lt;/p&gt;
      &lt;app-hyd-table&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/app-hyd-table&gt; `,
  })
  export class TableWrapperComponent implements OnInit {
    @ViewChild(HydTableComponent, { static: true }) _hydTable: HydTableComponent;
    @ContentChildren(ColumnComponent, { descendants: true }) columns: QueryList&lt;
      ColumnComponent
    &gt;;
  
    constructor() {}
  
    ngOnInit(): void {
      console.log('table wrapper - ngOnInit');
    }
  
    ngAfterContentInit(): void {
      console.log('table wrapper - ngAfterContentInit');
      console.log({ columns: this.columns });
    }
  
    ngAfterViewInit(): void {
      console.log('table wrapper - ngAfterViewInit');
      this._hydTable.columns = this.columns;  // &lt;--- Manual override
    }
  }
  </code></pre>
  <p>table:</p>
  <pre><code>@Component({
    selector: 'app-hyd-table',
    template: `&lt;p&gt;hyd-table works!&lt;/p&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;div *ngFor=&quot;let col of columns; let i = index&quot;&gt;Column {{ i }}&lt;/div&gt;
    `,
  })
  export class HydTableComponent implements OnInit {
    @ContentChildren(ColumnComponent) columns: QueryList&lt;ColumnComponent&gt;; // &lt;-- this is empty
    
    constructor() {}
  
    ngOnInit(): void {
        console.log(&quot;table - ngOnInit&quot;);
    }
  
    ngAfterContentInit(): void {
        console.log(&quot;table - ngAfterContentInit&quot;);
        console.log({ columns: this.columns });
    }
  
    ngAfterViewInit(): void {
        console.log(&quot;table - ngAfterViewInit&quot;);
    }
  }
  </code></pre>
  <p>In the table component, the QueryList is empty and I have to set it from the table-wrapper component manually in ngAfterViewInit, otherwise the *ngFor in the table component would not render anything.</p>
  <p>So my question is: how do I &quot;forward&quot; the ng-content of the wrapper component to the inner component's ContentChildren? The HTML is even rendered inside the inner component, it's just the ContentChildren that fails to pick up the columns inside its template.</p>