@ContentChildren with descendants search provided by directive doesn't work if used for ng-content

[andrui]

Hi,

Use-case:

1. I have a directive which performs my custom componetns search via ContentChildren
2. I have multiple re-usable container components
3. I want to use "search" directive in the template of these components

Here is plunker with STR:

1. Open plunker
2. Open browser's console
3. "dump inputs from container" dumps the result of "search" directive. Directive was used in container's component template. Array will be empty (reproduction of the issue)
4. At the same time "dump inputs from app" dumps 3 existing input components. Directive was used for container in app's template

[DzmitryShylovich]

Duplicate of #12758

[andrui]

@DzmitryShylovich I doubt that this is duplicate. In #12758 issue caused by class inheritance was mentioned. There is no class inheritance in my case and component class to select by ContentChildren is defined explicitly

[DzmitryShylovich]

Duplicate of #12758

yeah, I was wrong.
But anyway ContentChildren doesn't work with ng-content
#8563

[andrui]

But anyway ViewChild/Children doesn't work with ng-content

This is clear. I used ViewChild decorator to get the instance of my directive in both cases: in the template of container component and in the template of the app component. And instance of the directive was received successfully: there is no issuse with this. Issue is that ContentChildren

@ContentChildren(MyInput, { descendants: true }) private inputComps: QueryList<MyInput>;

which was used in directive to query the list of my "input" doesn't work in case when I place directive in template of my container component, but works when I use directive in template of app component

[DzmitryShylovich]

http://prntscr.com/e56ocv vs http://prntscr.com/e56on8

ContentChildren doesn't query projected content.

[DzmitryShylovich]

What you want is described here #8563
and currently is not supported

[andrui]

Here is another case: I used "select" directive in the template and also defined ContentChildren in template ( plunker ):

@Component({
  selector: 'my-container',
  template: `
    <div inputFinder>
      <ng-content></ng-content>
    </div>
    <p>
      <button (click)="dumpInputs()">DUMP INPUTS</button>
    </p>
  `
})
export class MyContainer {
  @ViewChild(InputFinderDirective) inFinder: InputFinderDirective;
  @ContentChildren(MyInput, { descendants: true }) private inputComps: QueryList<MyInput>;
  
  dumpInputs() {
    console.log('Inputs selected by directive: ', this.inFinder.getInputs());
    console.log('Inputs selected by container component: ', this.inputComps.toArray());
  }
}

And list selected by directive is empty. At the same time list selected by component is proper. Same ContentChildren metadata was used in both cases.

[DzmitryShylovich]

@ContentChildren(MyInput, { descendants: true }) private inputComps: QueryList;

queries components here http://prntscr.com/e5741e
3 directive and this is what we see in the console output.

@ViewChild(InputFinderDirective) inFinder: InputFinderDirective;

queries components here http://prntscr.com/e574j5
as we see there's no MyInput here. This is why it's empty

To me it works as intended

[andrui]

Is it expected behaviour? What is the difference of querying from component and directive which is used in component?

[andrui]

Hi @mhevery can you pls comment whether this issue ( plunker ) is related to the dynamic content projection or not.

[mhevery]

I am a bit confused what you think the bug is. One can not query across a ng-content boundary. You can either query what is in your view ViewChild, or what is in your content ContentChild Place of declarations. But queries never cross ng-content. So from my point of view this works as intended.

Here is the working plunker when I change it to ContentChild: http://plnkr.co/edit/oM9X1TX8OXz1eDcUDl6l?p=preview

[DzmitryShylovich]

@andrui did he answer your question? can this be closed?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}