I am needing to build in Angular.io a kind of tree specifically an Organizational Chart where the different areas are defined, for that my question is if it is possible to define a component that calls itself within itself so that it iteratively draws the tree something like this like the following:
node.component.ts
@Component({
selector: 'nodo'
templateUrl: 'nodo.html'
})
export class NodoComponent {
@Input() nombre: string;
@Input() hijos: any[];
}
node.html
<div>
<label>{{ nombre }}</label>
<!-- esta parte nose si se puede hacer -->
<nodo
*ngFor="let nodo of hijos"
[nombre]="nodo.nombre"
[hijos]="nodo.hijos">
</nodo>
</div>
Is this type of behavior possible in Angular2 or how to proceed in these cases to be able to draw the tree, by the way I was looking at the available components and none seems sufficient for my particular problem, although in this question it is only reduced to this.
It is possible to do what you say, although with some small change.
DEMO STACKBLITZ
I guess the structure you have to iterate over is something like this:
Your component
Nodo
should loop through that list and create new onesNodos
if the property existshijos
on an element of the list.