Recursively-placed components not displaying

Question

I have the following component, which displays child components of its own type for each element in an 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 the ngFor are not being displayed as expected - I see the correct number of pane elements, but they are not populated with the template contents.

Answer 1

It's because you need to declare the component's own type in the directives property of the decorator, as you do with any other directive.

Adding:

directives: [Pane]

to your component metadata results in the expected behavior.