Angular2 recursive components

The desired result is not possible by using only templates because the circular dependency causes:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'ChildComponent'

as you can see on this Plunker which is a sign that something went wrong (general DI problem not Angular one).

ParentComponent dependent on child:

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';
import {ChildComponent} from './child.component'

@Component({
  selector: 'parent',
  template: `<p>parent</p>
  <child></child>`,
  directives: [ChildComponent]
})
export class ParentComponent {
  constructor() {}
}

ChildComponent dependent on parent which causes the circular dependency:

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';
import {ParentComponent} from './parent.component';

@Component({
  selector: 'child',
  template: `<p>child</p>
  <parent></parent>`,
  directives: [ParentComponent]
})
export class ChildComponent {
  constructor() {}
}

However you can achieve this by using DynamicComponentLoader as you can see in this example but remember to provide some sort of condition to stop the endless component rendering. In my example the condition is input parameter in the parent component:

import {Component, Input} from 'angular2/core';
import {AppComponent} from './app.component';
import {ChildComponent} from './child.component'

@Component({
   selector: 'parent',
   template: `<p>parent</p>
   <child *ngIf="condition"></child>`,
   directives: [ChildComponent]
})
export class ParentComponent {
  constructor() {
  }

  @Input() condition: bool;
}