@ContentChildren is not being populated

23
votes

I have three components: App, Parent, and Child:

App Component

@Component({
    selector: 'app',
    directives: [Parent,Child],
    template: '<parent><child>hi</child><child>there</child></parent>'
})
export class AppComponent {
    constructor() {
    }
}

Parent Component

@Component({
    selector: 'parent',
    template: '<div><h1>Parent</h1><ng-content></ng-content></div>'
})
export class Parent {
    @ContentChildren(Child) children: QueryList<Child>;
    ngAfterContentInit() {
        console.log(this.children);
    }
}

Child Component

@Component({
    selector: 'child',
    template: '<div><h1>Child</h1></div>'
})
export class Child {
}

As you can see in the Parent component, I've tried to use @ContentChildren to get the list of Child components, using the Child type as a selector. However, this does not seem to work - the content children list is always undefined.

In the ngAfterContentInit() method, I would have expected content children to be populated.

Am I missing something?

[Update]

So it turns out that the problem exists when all three components are in the same file (see console debug window where I output the content children):

Plnkr Demo of Issue

If they are in separate files the problem goes away:

Plnkr Demo Working

Normally, I would only place all the components in the same file for learning purposes. But it has me curious. Does anyone know why the behaviour is different?

3
angular
The children are visible in the DOM? I just tried it (in Dart) and it's working. Have you tried a more permissive type than QueryList<Child> for the variable like any. - Günter Zöchbauer
@GünterZöchbauer I tried changing the type to any but the problem is still there. It seems its related to all three components being in the same file. - pixelbits
I can't reproduce in Dart (if this is any help), it also works with everything in one file. - Günter Zöchbauer
it is:). I've tried it in plnkr and VS2015 and its same issue... strange - pixelbits

3 Answers

26
votes

You need to use forwardRef to reference classes which are not yet defined. See this plunk. Remember ES6 classes are not hoisted.

@Component({
    selector: 'parent',
    template: '<div><h1>Parent</h1><ng-content></ng-content></div>'
})
export class Parent {
    @ContentChildren(forwardRef(() => Child)) children; // <!- HERE

    ngAfterContentInit() {
        console.log(this.children);
        console.log(this.children.length);
    }
}

UPD Mark Rajcok pointed out an excellent article about forward references in angular2 (see the comment bellow). Must read: thoughtram.io Forward references in Angular 2.

11
votes

You need to add { descendants: true } to include nested children,

@Component({
    selector: 'parent',
    template: '<div><h1>Parent</h1><ng-content></ng-content></div>'
})
export class Parent {
    @ContentChildren(Child, { descendants: true }) children: QueryList<Child>;
    ngAfterContentInit() {
        console.log(this.children);
        console.log(this.children.length);
    }
}

descendants - True to include all descendants, otherwise include only direct children.

1
votes

This also happens if your child component references your parent component in the constructor; Angular doesn't like the circular reference!

I needed to choose only one method for parent->child communication: either use ContentChildren OR use the parent component in the child's constructor.

@Component()
export class Parent {
  @ContentChildren(Child)
  private children: QueryList<Child>;
}

@Component()
export class Child {
  constructor(
    // !! Remove the following line to make the ContentChildren "work" again.
    @Optional() parent: Parent
  ) { }
}