I have a setup with Angular 2 where the home.html has a
<widgetcontainer></widgetcontainer> call, which in turn calls certain widget templates.
Those widget templates however would need to call widgetcontainer again so their sub-widgets can be displayed as well.
It looks somewhat like this:
home.html:
<div> home site specific content </div>
<ul>
<widgetcontainer *ng-for="#widget of widgetList" [containerwidget]="widget"></widgetcontainer>
</ul>
widgetcontainer.html:
<li>
<div [ng-switch]="containerwidget.type">
<p *ng-switch-when="1"><widget1 [widget]="containerwidget"></widget1></p>
<p *ng-switch-when="2"><widget2 [widget]="containerwidget"></widget2></p>
<p *ng-switch-default>Error in widget-data</p>
</div>
</li>
now widget1 and widget2 are pretty much identical except for the first bit of content:
<div> widget 1 or 2 specific content </div>
<div *ng-if="widget.widgetSubList">
<div class="widget-sub-listing" *ng-for="#widget of widgetlocal.widgetSubList">
<widgetcontainer *ng-for="#widget of widgetlocal.widgetSubList" [containerwidget]="widget"></widgetcontainer>
</div>
</div>
The reason why I need to do it this way is that widget1 can contain a series of widget2 (and others) which in turn can contain widget1 again.
The .ts counterparts of each widget contain the required @Input part, so if I leave out the call to widgetcontainer, it does work just fine, though of course therefor can't display the subwidgets anymore. Reading out the subwidgets works as well, tested that with console.logs.
I found similiar problems like this one: How do I inject a parent component into a child component? where, from what I gathered, the problem is solved by importing Input and forwardRef and using
constructor( @Inject(forwardRef(() => widgetcontainer)) private _parent: widgetcontainer) { }
in the children, in my case widget 1 and 2. I tried that as well, but I still get an error. Importing widgetcontainer to the widget.ts files works without trouble, adding it to the directives or adding the <widgetcontainer></widgetcontainer> call into the html of widget1 or 2 breaks the program and throws me the error message:
EXCEPTION: TypeError: Die Eigenschaft "length" eines undefinierten oder Nullverweises kann nicht abgerufen werden. in [null]
As a little translation-attempt: it basicly says
the property "length" of an undefined or null-reference can not be called. in [null]
And I can't locate where exactly the error is. Considering it works without adding widgetcontainer to the directives in widget1 or 2, I would guess that is where the whole thing breaks though.
Previously I had a similiar error, though instead of length it stated to have failed calling forEach though now I am unable to replicate the error.
From what I have been reading up on the problem is the circular reference/call of the <widgetcontainer></widgetcontainer> template. It should be possible to have it work, though it needs a stopping-condition to not turn into an infinite loop. Therefor I already have the *ng-if condition in my widget1 and 2 which is tested already with simple listings of the subwidget IDs and worked just fine as a condition.
The question is now where am I going wrong here? Or how can I get the circular call to work?
