Angular2 recursive component output

Question

I have following problem: let's assume that I have Component A that have two subcomponents Ar and Ad. Subcomponent Ar is recursive created tree and subcomponent Ad is component which shows details about choosen node in recursive tree (subcomponent Ar). How can I send selected node from sub(sub)component in Ar to Component Ad using @Output? Should it be @Output or something else?

app.component.html:

<tree [input]="fooTree" [output]="updateDetails($event)"></tree>
<tree-details [input]="input"></tree-details>

tree.component.html:

<tree [input]="fooTree.children"></tree>

tree-details.component.html

<div>{{input.name}}</div>
<div>{{input.id}}</div>

In this case I will see only root tree details, how can I do this to get info from other node (one of recursivly created), when is selected?

Answer 1

UPDATE:

Its easier to see in a demo-app: https://plnkr.co/edit/WaYluZyPaC0OEV0YovbC?p=preview

..

Your tree-component Ar could have an @Ouput(). Your AppComponent would consume this output and would post the selected data to the second sub-component detail-component.

app.component.html

<tree (yourOutputNameHere)="yourFunctionToReceiveAndPostSelectedData($event)"></tree>
<details #yourDetailViewComponent></details>

tree.component.html

<tree (yourOutputNameHere)="yourFunctionToReceiveAndPostSelectedData($event)"></tree>

Your tree-component could even have an @Input() and inside of your template you could do something like this:

app.component.html

<tree [detail-view-input]="yourDetailViewComponent"></tree>
<details #yourDetailViewComponent></details>

tree.component.html

<tree [detail-view-input]="detailViewInput"></tree>