Angular2 recursive components

Question

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

How to add parent component to child component?

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

Angular2 Recursive patterns in javascript

However, the solutions provide only work with the component objects themselves and do not solve the problem of HTML tags with which the components should interact.

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

I would be very grateful for the help and possibly the plunkr / fiddle you can offer.

Answer 1

The desired result is not possible using only patterns, because circular dependence causes:

EXCLUSION: Unexpected value of the 'undefined' directive in the view of the "ChildComponent" component

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

ParentComponent depends on the 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 depends on the parent that 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 using the DynamicComponentLoader, as you can see in this example , but be sure to provide some kind of condition to stop the infinite component rendering. In my example, the condition is an 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; }