@ContentChildren is not being populated when parent render items using ng-content

Question

I have three components: Panel, PanelGroup (ul) and PanelItem (li):

Panel:

@Component({
selector: "panel",
directives: [PanelGroup,PanelItem],
template: `
  <panel-group>
    <ng-content select="panel-item"></ng-content>
  </panel-group>
`})

export default class Panel {}

PanelGroup:

@Component({
selector: "panel-group",
directives: [forwardRef(() => PanelItem)],
template: `
  <ul>
    <ng-content></ng-content>
  </ul>`
})

export default class PanelGroup {
  @ContentChildren(forwardRef(() => PanelItem)) items;

  //I need to access children here and modify them eventually:
  ngAfterContentInit() {
    console.log(this.items.toArray()); //the array is always empty
  }
}

PanelItem:

@Component({
selector: "panel-item",
directives: [forwardRef(() => PanelGroup)],
template: `
  <li>
    <span (click)="onClick()">
        {{title}}
    </span>
    <panel-group>
        <ng-content select="panel-item"></ng-content>
    </panel-group>
  </li>`
})

export default class PanelItem {
  @Input() title = 'SomeTitle';
}

As seen in the above example I try to get the content children inside the PanelGroup component, however the collection is always empty. Also tried to add selector to the 'ng-content' inside it - in this case the children are never rendered which is bit weird.

Am I missing something?

Here is plunk:

demo

Created issue https://github.com/angular/angular/issues/8937 — Günter Zöchbauer, Jun 01 '16 at 09:22

score 19 · Answer 1 · edited May 23 '17 at 11:33

19

Use descendants: true:

@ContentChildren(forwardRef(() => PanelItem), {descendants: true}) items;

See also angular 2 / typescript : get hold of an element in the template

edited May 23 '17 at 11:33

Community

1
1

answered Aug 24 '16 at 12:52

Günter Zöchbauer

623,577
216
2,003
1,567

3

Well this saved my bacon – Matt Aug 29 '17 at 02:14
I have tried to modify the existing demo and it does not work. Could you check again ? – javaLearner Apr 05 '18 at 15:06
@javaLearner can you please create a reproduction in http://stackblitz.com? – Günter Zöchbauer Apr 05 '18 at 15:10
As you can see, items.length is still 0. I wonder if I miss something? – javaLearner Apr 05 '18 at 17:16
Why did you use such an old Angular version? http://stackblitz.com/ would make this much easier. Just click Angular and you get a fully set up project. – Günter Zöchbauer Apr 05 '18 at 17:19
Because the panel component is the one they are projected to http://plnkr.co/edit/pfKONBv13GhIt8cpP7LU?p=preview – Günter Zöchbauer Apr 05 '18 at 17:25
I'm having the same issue with Angular 12. I'm using forward ref, descendants:true and I'm checking in ngAfterContent init the list is empty. – K-Dawg Aug 05 '21 at 08:09

score 0 · Answer 2 · answered Jan 18 '18 at 21:39

I am having a similar issue but it seems this one can also be solved by removing the select option from the panel-item. I assume since select='panel-item' is looking for only content but there is a Nested Object as content. If you remove the restriction (in the plunk example) it shows it.

@ContentChildren is not being populated when parent render items using ng-content

2 Answers2