title: Angular 5: Getting a QueryList for all ContentChildren (even the ones in sub components)
body: <p>I have the following html structure where <code>foo</code> and <code>bar</code> are two directives and <code>baz</code> is a custom component.</p>
  
  <pre><code>&lt;div foo&gt;
    &lt;div bar&gt;&lt;/div&gt;
    &lt;baz&gt;&lt;baz&gt;
    &lt;baz&gt;&lt;baz&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The html of the <code>baz</code>-component looks something like ...</p>
  
  <pre><code>&lt;div bar&gt;Yada Yada Yada&lt;/div&gt;
  </code></pre>
  
  <p>... and the <code>foo</code>-directive looks something like this:</p>
  
  <pre><code>// ...
  @Directive({
    selector: '[foo]'
  })
  export class FooDirective implements AfterContentInit {
  
    @ContentChildren(BarDirective)
    m_bars: QueryList&lt;BarDirective&gt;;
  
    public ngAfterContentInit(): void {
  
      console.log('barCount:', this.m_bars.length);
    }
  }
  </code></pre>
  
  <p>The problem I experience is that the length of <code>m_bars</code> inside the <code>FooDirective</code> is 1. It only contains the <code>div</code> that is a direct child of <code>&lt;div foo&gt;</code>. I however expected this number to be 3 (the one direct child of <code>&lt;div foo&gt;</code> and the other <code>div</code>'s inside the two <code>baz</code>-components).</p>
  
  <p>Why is that so and how can this problem be solved - if it can be solved at all?</p>
  
  <p>Edit 1:
  Changing the <code>ContentChildren</code> decorator to</p>
  
  <pre><code>@ContentChildren(BarDirective, { descendants: true })
  m_bars: QueryList&lt;BarDirective&gt;;
  </code></pre>
  
  <p>doesn't have any effect at all.</p>