Angular2 recursive components

Question

I am trying to deploy recursive components as discussed in these posts and plnkr:

How do I inject a parent component into a child component?

> `http://plnkr.co/edit/l7jsV0k7DbGJGXPFlSPr?p=preview`

Angular2 Recursive Templates in javascript

However, the solutions provided only deal with the component objects themselves and do not solve the issue of the HTML tags that the components are supposed to instantiate with.

How can the child component use the <parent> ... </parent> html tag inside of its template?

I would be very grateful for help and perhaps a plunkr/fiddle that you may be able to offer.

Answer 1

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;
}