Angular2-tree-diagram - Javascript

Angular2-tree-diagram is a Javascript library for creating and visualizing tree diagrams in Angular 2 applications. The library is built using pure Angular components and works with any JSON data representing a tree structure.

Key Features

• Easily create tree diagrams with just a JSON object representing your data
• Customize the style and appearance of your tree diagram using CSS
• Supports interactive features like expanding and collapsing nodes
• Allows for custom templates to be used for each node in the tree

Getting Started

To get started using Angular2-tree-diagram, first install the package via npm:

npm install angular2-tree-diagram

Next, import the TreeDiagramModule into your Angular module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TreeDiagramModule } from 'angular2-tree-diagram';

@NgModule({
  declarations: [YourAppComponent],
  imports: [
    CommonModule,
    TreeDiagramModule
  ],
  bootstrap: [YourAppComponent]
})
export class YourAppModule { }

Now you can use the tree-diagram component in your Angular templates.

Example Usage

Here's an example usage of the tree-diagram component with some sample data:

<tree-diagram [data]="treeData"></tree-diagram>

<script>
  const treeData = {
    label: 'Parent Node',
    children: [
      {
        label: 'Child Node 1',
        children: []
      },
      {
        label: 'Child Node 2',
        children: [
          {
            label: 'Grandchild Node 1',
            children: []
          },
          {
            label: 'Grandchild Node 2',
            children: []
          }
        ]
      }
    ]
  };
</script>

This will create a tree diagram like the following:

Customizing the Tree Diagram

You can customize the appearance and behavior of the tree diagram using CSS and Angular template directives.

For example, you can use the expandedIcon and collapsedIcon input bindings to customize the icons used for expanded and collapsed nodes:

<tree-diagram [data]="treeData" expandedIcon="&#x25bc;" collapsedIcon="&#x25b6;"></tree-diagram>

Or, you can use the nodeTemplate input binding to define a custom template for each node in the tree:

<tree-diagram [data]="treeData" [nodeTemplate]="nodeTemplate"></tree-diagram>

<ng-template #nodeTemplate let-node="node">
  <div class="node">
    <span class="node-label">{{ node.label }}</span>
    <span class="node-controls">
      <a href="#" (click)="node.expand()">&#x25bc;</a>
      <a href="#" (click)="node.collapse()">&#x25b6;</a>
    </span>
  </div>
</ng-template>

Conclusion

Angular2-tree-diagram is a powerful and flexible library for creating tree diagrams in Angular 2 applications. With its simple interface and extensive customization options, it's easy to create complex and visually appealing tree structures in your projects.