5

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.

Community
  • 1
  • 1
Benjamin McFerren
  • 822
  • 5
  • 21
  • 36
  • I'm only on my phone and can't run your Plunker, but according to yozr answer you're missing `forwardRef`. There are some answers that demonstrate how to use it. (downvote wasn't me) – Günter Zöchbauer Mar 16 '16 at 21:10
  • forwardRef doesn't resolve the dependency injection problem because this simply is circular dependency which causes exception when Angular tries to resolve the dependencies for the directives used in the current component. Also condition statements used like flags like boolean input in the parrent component used like condition for child component existence doesn't work in this case. The question is why there is not appropriate exception for this problem? – Nikola Nikolov Mar 16 '16 at 21:15
  • 1
    why was this possible with Angular1 and not Angular2? How might one try to use dynamicComponentLoader to achieve this? – Benjamin McFerren Mar 16 '16 at 21:23
  • Yes, you are right. That can be achieved by using dynamicComponentLoader - edited my answer to include this case. – Nikola Nikolov Mar 17 '16 at 07:43

1 Answers1

2

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;
}
Nikola Nikolov
  • 1,310
  • 2
  • 10
  • 20