Recursively allocated components not displayed

Question

I have the following component that displays child components of its type for each element of the array.

@Component({ selector:'pane', template: ` <pane [item]="item"> <div> <pane *ngFor="#subItem of item.subItems" [item]="subItem"></pane> </div> <div innerHtml="item.getContent()"></div> </pane> ` )} export class Pane { @Input() item: any; } 

But the pane components inside ngFor not displayed pending - I see the correct number of pane elements, but they are not populated with the contents of the template.

Answer 1

This is because you need to declare your own component type in the directives property of the decorator, as in any other directive.

Addendum:

 directives: [Pane] 

for component metadata leads to the expected behavior.