Recursive component loading with recursive array

Question

I\'m trying to load an Angular 2 component recursively with a recursive array (plunk: http://plnkr.co/edit/3npsad?p=preview).

Given this recursive array:

Answer 1

update

With the introduction of @NgModule and the migration of directives to @NgModule forwardRef shouldn't be necessary anymore.

original

@Component({
  selector: 'my-item',
  styles: ['div {padding-left: 32px;}']
  providers: [],
  template: `
{{id}} - {{text}}
    
    
    

  `,
  directives: [forwardRef(()=> ItemComponent)]
})
export class ItemComponent {
  @Input() id: string;
  @Input() text: string;
  @Input() items: any[];
  constructor() {
  }
}

forwardRef is required because the class ItemComponent is referenced before it is declared.

Plunker example