update
forwardRef()
isn’t required anymore because directives
was moved to NgModule.declarations
and therefore recursive components don’t need to be registered on themselves as directives
anymore.
original
That supported. You just need to add the component to directives: []
in its @Component()
decorator. Because the decorator comes before the class and classes can’t be referenced before they are declared forwardRef()
is necessary.
import {Component, forwardRef, Input} from '@angular/core'
@Component({
selector: 'tree-node',
template: `
<div>{{node.name}}</div>
<ul>
<li *ngFor="let node of node.children">
<tree-node [node]="node"></tree-node>
</li>
</ul>
`
})
export class TreeNode {
@Input() node;
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<tree-node [node]="node"></tree-node>
</div>
`,
directives: [TreeNode]
})
export class App {
constructor() {
this.name="Angular2 (Release Candidate!)"
}
node = {name: 'root', children: [
{name: 'a', children: []},
{name: 'b', children: []},
{name: 'c', children: [
{name: 'd', children: []},
{name: 'e', children: []},
{name: 'f', children: []},
]},
]};
}
Angular 2.0.0-beta.x Plunker example
See also Inject parent component of the same type as child component