Angular2: Recursive component with template

Question

You can see full proof of concept here: https://plnkr.co/edit/slshjP?p=preview

I want to create a simple tree component, that allows the user to specify template for each node eg.

<app-tree-editor [nodes]="fields">
  <ng-template treeTemplate let-node>{{node}}</ng-template>
</app-tree-editor>

I define a directive to get hold of the template:

@Directive({
  selector: '[treeTemplate]',
})
export class TreeEditorTemplate {
  constructor(public template: TemplateRef<{}>) {

  } 
}

And then inside of my tree I get a reference to it.

@Component({
  selector: 'app-tree-editor',
  template: `
    <app-tree-node [node]="root" [templateRef]="nodeTemplateRef">
    </app-tree-node>
  `,
})
export class TreeEditorComponent {
  @Input() nodes: any;

  @ContentChild(TreeEditorTemplate) nodeTemplate: TreeEditorTemplate;
  nodeTemplateRef: TemplateRef<{}>;

  root: any;

  ngOnInit() {
    this.root = {children: this.nodes};
  }

  ngAfterContentInit(): void {
    this.nodeTemplateRef = this.nodeTemplate.template;
  }
}

The problem is, the template I get is a comment node :/

Any idea what I'm doing wrong?

Code with repro case: You can see full proof of concept here: https://plnkr.co/edit/slshjP?p=preview

yurzui · Accepted Answer · 2017-11-23 05:40:48Z

1

You forgot to pass template ref to your child app-tree-node components:

app/tree-children.ts

@Component({
  selector: 'app-tree-children',
  template: `
  <div class='tree-indent'>
  <app-tree-node *ngFor="let child of nodes" [node]="child" 
                            [templateRef]="templateRef"></app-tree-node>
                              ^^^^^^^^^^^^^^^^^^^^^^
                                   add this
  </div>
  `
})
export class TreeChildrenComponent {
  nodes: any;

  templateRef: TemplateRef<any>;  <== add this
}

app/tree-node.ts

let componentRef = viewContainerRef.createComponent(componentFactory);
componentRef.instance.nodes = this.node.children || [];
componentRef.instance.templateRef = this.templateRef;   <== add this

Plunker Example

answered Nov 23, 2017 at 5:40

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian · Accepted Answer · 2017-11-22 21:45:18Z

0

You can use a template variable in this case and then pass it to the component through the @Input decorator.

<app-tree-editor [template]="template" [nodes]="fields">
    <ng-template #template let-node>{{node}}</ng-template>
</app-tree-editor>

And in your component you'd add the Input:

@Input() template: TemplateRef<any>

answered Nov 22, 2017 at 21:45

Christian

2,8613 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular2: Recursive component with template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related