@ContentChildren cannot find children whose parent has a directive like ngClass, ngStyle

(Updated to reflect discussion below)

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior When @ContentChildren is used to get a QueryList of elements inside the <ng-content></ng-content>, it fails to find children with a directive like [ngClass]="..." or [ngStyle]="..." in their parent. Once the parent has no more directive, the problem goes away and those children are found. Using {descendants: true} in @ContentChildren seems to work around this problem.

Expected behavior Those children should be found.

Minimal reproduction of the problem with instructions

Minimal demo: http://plnkr.co/edit/0nPxOa7t0FLDY98PFfnW?p=preview

• Please click the two buttons and check console log output
• One of them finds (the one at the ng-content level) 3 instances of the SomeDirective
• The other one finds (the one at within the ng-content) 9 instances of the SomeDirective

What is the motivation / use case for changing the behavior?

This is an inconsistent behavior and it causes confusion.

Please tell us about your environment:

Windows 8.1, IntelliJ, npm

• Angular version: 2.4.0

• Browser: tried on Chrome 56 | IE 11

• Language: all

[pkozlowski-opensource]

OK, so after trying to come up with a sensible documentation for the current behaviour @mhevery and I believe that the way things work correctly is confusing to the point that we can label it as a “bug” and propose a simpler system.

The current working proposal is to change descendants: false to follow the following rule: only query direct children (in the sense of elements in a template) when descendants: false is specified. Some examples give a @ContentChildren(Tab, {descendants: false}) from the <tabset> component:

<tabset>
  <tab>...</tab>
  <tab>...</tab>
</tabset>

In the above example the query would pick up 2 <tab>s.

<tabset>
    <div>
      <tab>...</tab>
      <tab>...</tab>
    </div>
</tabset>

In the above example the query would pick up 0 <tab>s (no tabs selected since no <tab> element is a direct child of <tabset>).

<tabset>
    <div>
      <tab>...</tab>
    </div>
    <tab>...</tab>
</tabset>

In the above example the query would pick up 1 <tab>s (only the second <tab> element is a direct child of <tabset>).

The above proposal will make rules pretty clear and easy to follow. Unfortunately it will be a breaking change, technically speaking. But at present we believe that it is more of a bug-fix rather than change of the expected behaviour.

However, if you’ve got a valid use-case that will be breaking after implementation of the above proposal, please speak up! @danielcheng825 I would love to know what is your real-life use-case for having an element with ngClass above the content queried for.

[ericmartinezr]

https://angular.io/docs/ts/latest/api/core/index/ContentChildren-decorator.html

descendants - include only direct children or all descendants.

@ContentChildren(Type, {descendants:true})