Continuously apply the template in a recursive manner in Angular 2 without reintroducing any duplicated components

Question

Continuously apply the template in a recursive manner in Angular 2 without reintroducing any duplicated components

Recently, I delved into the world of angular 2 and found it to be quite fascinating. However, I'm currently facing a roadblock and could really use some assistance.

The scenario is as follows:

I am working on creating a select box with checkboxes in a hierarchical structure.

A
|---A1
|---A2
     |---A2.1
     |---A2.2
           |.....
|.....

The data structure will be returned by a web service in JSON format, so the number of hierarchical children is unknown upfront.

Here's what I've done so far:

@Component({
  selector: 'tree-view',
  template: `<ul>
    <li *ngFor="let items of data">
      <a href="javascript:void(0);"
      (click)="toggleMultiSelect($event,[items])">
        <input type="checkbox" name="{{items.name}}"
        [checked]="getChecked(items.id)"
        id="{{items.id}}">
        <label [attr.for]="items.id" class="custom-unchecked">{{items.name}}</label>
      </a>
      <tree-view
        *ngIf="items.children && items.children.size > 0"
        (isSelected)="resultChild($event)"
        [data]="items.children"></tree-view>
    </li>
  </ul>`,
  directives: [ MultiHierarchyTreeViewComponent ]
})

Currently, I repeat the selector when there are child elements in the data, resulting in a hierarchical structure for the select box. However, this approach makes select all, deselect all, parent-child selection operations challenging due to the repetition of the class.

I initially thought using <template> would resolve the issue, but unfortunately, it did not.

I've been trying to solve this puzzle for the past couple of days, but every attempt seems to lead to a dead end.

angular typescript angular2-template

Answer 1

Answer №1

I recently encountered a similar situation and found that separating the tree data structure from its components was the most effective approach for me.

Tree data structures can be represented as nested objects:

export interface TreeNodeInterface {
    parent: TreeNodeInterface;
    children: TreeNodeInterface[];
}

A basic class implementing this interface might look like this (full code available here):

export class TextTreeNode implements TreeNodeInterface {
    private parentNode: TreeNodeInterface;
    private childrenNodes: TreeNodeInterface[] = [];

    constructor(text: string, options: TreeNodeOptions|Object, children: TreeNodeInterface|TreeNodeInterface[] = []) {
        // ...
    }

    get parent() {
        return this.parentNode;
    }

    get children() {
        return this.childrenNodes;
    }
    // ...
}

The rendering of the tree is then handled by a separate component.

I chose this approach because it allows me to easily show/hide subtrees using *ngIf, keeping the DOM relatively simple even with large trees (assuming only a portion of the tree is usually visible). It also enables reusability of the tree in different parts of my application.

Although you could achieve similar functionality with QueryList, separating the tree structure worked better for my specific use case.

@Component({
    selector: 'ng2-treeview',
    directives: [ TreeViewComponent ],
    template: `
        ...
        <ng2-treeview *ngFor="let child of node.children" [node]="child"></ng2-treeview>
    `
})
export class TreeViewComponent implements TreeViewInterface, AfterViewInit
{
    @Input() node: TreeNodeInterface;        
    // ...
}

Using the component is straightforward:

@Component({
    selector: 'demo',
    directives: [TreeViewComponent],
    template: `
        <ng2-treeview [node]="textTreeView"></ms-treeview>
    `
})
export class DemoComponent {
    textTreeView = new TextTreeNode('Root node', null, [
        new TextTreeNode('Child node #1'),
        new TextTreeNode('Child node #2'),
        new TextTreeNode('Child node #3'),
        new TextTreeNode('Child node #4', null, [
            new TextTreeNode('Hello'),
            new TextTreeNode('Ahoy'),
            new TextTreeNode('Hola'),
        ]),
        new TextTreeNode('Child node #5'),
    ]);
}

You can find the complete source code on ng2-treeview. Please note that the documentation is not yet complete and is based on the old Angular 2 RC.1 version.

Edit: If you need to handle events like mouse clicks on each tree node, you can create a service injected into TreeViewComponent:

import {EventEmitter, Injectable} from '@angular/core';

@Injectable()
export class TreeNodeService {
    click: EventEmitter<Object> = new EventEmitter();
}

Then, each (click) event on the TreeViewComponent can be passed to the service:

nodeClick(event) {
    this.treeNodeService.click.emit(this.node.id);
}

Lastly, DemoComponent can receive TreeNodeService as a dependency in its constructor and subscribe to the click event emitter. Multiple independent instances of TreeNodeService can coexist since DemoComponent can also provide one.

Answer 2

I recently encountered a similar situation and found that separating the tree data structure from its components was the most effective approach for me.

Tree data structures can be represented as nested objects:

export interface TreeNodeInterface {
    parent: TreeNodeInterface;
    children: TreeNodeInterface[];
}

A basic class implementing this interface might look like this (full code available here):

export class TextTreeNode implements TreeNodeInterface {
    private parentNode: TreeNodeInterface;
    private childrenNodes: TreeNodeInterface[] = [];

    constructor(text: string, options: TreeNodeOptions|Object, children: TreeNodeInterface|TreeNodeInterface[] = []) {
        // ...
    }

    get parent() {
        return this.parentNode;
    }

    get children() {
        return this.childrenNodes;
    }
    // ...
}

The rendering of the tree is then handled by a separate component.

I chose this approach because it allows me to easily show/hide subtrees using *ngIf, keeping the DOM relatively simple even with large trees (assuming only a portion of the tree is usually visible). It also enables reusability of the tree in different parts of my application.

Although you could achieve similar functionality with QueryList, separating the tree structure worked better for my specific use case.

@Component({
    selector: 'ng2-treeview',
    directives: [ TreeViewComponent ],
    template: `
        ...
        <ng2-treeview *ngFor="let child of node.children" [node]="child"></ng2-treeview>
    `
})
export class TreeViewComponent implements TreeViewInterface, AfterViewInit
{
    @Input() node: TreeNodeInterface;        
    // ...
}

Using the component is straightforward:

@Component({
    selector: 'demo',
    directives: [TreeViewComponent],
    template: `
        <ng2-treeview [node]="textTreeView"></ms-treeview>
    `
})
export class DemoComponent {
    textTreeView = new TextTreeNode('Root node', null, [
        new TextTreeNode('Child node #1'),
        new TextTreeNode('Child node #2'),
        new TextTreeNode('Child node #3'),
        new TextTreeNode('Child node #4', null, [
            new TextTreeNode('Hello'),
            new TextTreeNode('Ahoy'),
            new TextTreeNode('Hola'),
        ]),
        new TextTreeNode('Child node #5'),
    ]);
}

You can find the complete source code on ng2-treeview. Please note that the documentation is not yet complete and is based on the old Angular 2 RC.1 version.

Edit: If you need to handle events like mouse clicks on each tree node, you can create a service injected into TreeViewComponent:

import {EventEmitter, Injectable} from '@angular/core';

@Injectable()
export class TreeNodeService {
    click: EventEmitter<Object> = new EventEmitter();
}

Then, each (click) event on the TreeViewComponent can be passed to the service:

nodeClick(event) {
    this.treeNodeService.click.emit(this.node.id);
}

Lastly, DemoComponent can receive TreeNodeService as a dependency in its constructor and subscribe to the click event emitter. Multiple independent instances of TreeNodeService can coexist since DemoComponent can also provide one.

Continuously apply the template in a recursive manner in Angular 2 without reintroducing any duplicated components

Answer №1

Similar questions

Integrate a @Component from Angular 2 into the Document Object Model of another component

Ionic Troubleshoot: Issue with Reading Property

What are the steps for deploying an Angular 2 project to a server with PUTTY?

Exploring the dynamic world of Angular2 animations paired with the

Pending activation of the Timer Fired event

Error: Incorrect Path for Dynamic Import

Angular2 - Model not being refreshed by Directive

What is the reason behind TypeScript requiring me to initialize a property even though I am retrieving its value from a local reference?

Navigating the way: Directing all TypeScript transpiled files to the build folder

The CSS overflow scroller trims the excess background color

What is the best way to retrieve an object from a loop only once the data is fully prepared?

`The error "mockResolvedValue is not recognized as a function when using partial mocks in Jest with Typescript

Adjusting the button's background hue depending on the table element

Angular 2 rc1 does not support ComponentInstruction and CanActivate

What is the best way to link together Angular observables?

A recursive approach for constructing a tree structure in Angular

Updating Elements in an Array Using JavaScript is Not Functioning as Expected

Enhance your Fastify routes by incorporating Swagger documentation along with specific tags and descriptions

When attempting to update Ionic2 from BETA11 to RC0, the error "bundle failed: 'InMemoryBackendService' is not exported" was encountered

Having Trouble with React, TypeScript, and MUI Tabs? Dealing with Overload Errors?