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

Transferring data from a child component to a parent component in Angular using @ViewChild requires providing 2 arguments

Steps for integrating custom slot properties in MUI data grids

What is the essential Angular 2 script that must be included for a simple Angular 2 application to function properly?

Creating a build task in Visual Studio Code with universal TypeScript compiler settings

What is the best way to remove a specific row from an Angular Material table that does not have any filters

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

Executing multiple http post requests in Angular2 using a for loop

"Encountering a problem during the installation of the Angular

The TypeScript generated definition file (.d.ts) is failing to work properly in conjunction with the typings specified in package.json

Creating a seating arrangement for a movie theater screen

Tips for Developing Drag Attribute Directive in Angular 2.0

Angular iframe is not displaying content

There is no matching signature for Type when using withStyles

Tips for troubleshooting JSON sorting in Angular

Leverage the power of NPM Libraries in Angular using Angular-CLI

Having trouble successfully deploying the app generated by "dotnet new angular" onto Azure

Is there a resource or extension available for identifying design flaws in Typescript code?

What steps are involved in adding a table footer to ng2-smart-table?

Compile a roster of service providers specializing in unit testing imports

What causes the appearance of the "?" symbol at the beginning of the URL and triggers a reboot of the app when moving through the absolute path?