Angular2 @ContentChildren not populating inside parent <ng-content>
QUESTION:
@ContentChildren doesn't seem to work with parent containers <ng-content>
. Even if the content is a child of the component.
Plunker: https://plnkr.co/edit/J5itJmDfwKwtBsG6IveP?p=preview
NOTE : I am using{descendants: true}
Sample code:
Basic HTML:
<div>
<child>
<test></test>
<test></test>
<test></test>
</child>
<br><br>
<parent>
<test></test>
<test></test>
<test></test>
</parent>
</div>
Child component:
<h2>Child</h2>
<parent>
<ng-content></ng-content>
</parent>
Parent component:
<h3>Parent</h3>
<ng-content></ng-content>
<div class='length'>Line count : {{length}}</div>
Problem
The component length test
is 0 for the child component, but 3 for the parent component.
Detailed code:
import {
Component, ContentChildren, Directive
} from '@angular/core';
@Directive({selector: 'test'})
export class Test {}
@Component({
selector: 'parent',
template: `
<h3>Parent</h3>
<ng-content></ng-content>
<div class='length'>Line count : {{length}}</div>
`
})
export class ParentComponent {
@ContentChildren(Test, {descendants: true}) private tests : QueryList<Test>;
constructor() { }
get length () {
return this.tests.length;
}
}
import {
Component
} from '@angular/core';
@Component({
selector: 'child',
template: `
<h2>Child</h2>
<parent>
<ng-content></ng-content>
</parent>
`
})
export class ChildComponent {
constructor() { }
}
+3
source to share