Crab Tree

Angular Tree View Component

Installation

using yarn

yarn add crab-tree

or using npm

npm install --save crab-tree

Getting Started

1. import CrabTreeModule into your angular module.

   import { CrabTreeModule } from 'crab-tree';
   
   @NgModule({
     imports: [
       CommonModule,
       CrabTreeModule,
       ...
     ],
     ...
   })
   export class AppModule {
   
   }
   

2. create crab tree using crab-tree-root element in your component's template

   <crab-tree-root [nodes]="nodes"></crab-tree-root>
   

3. provider the data in your component

   import { Component } from '@angular/core';
   import { CrabTreeNode } from 'crab-tree';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
   })
   export class AppComponent {
   
     public nodes: Array<CrabTreeNode> = [
       new CrabTreeNode({
         id: 0,
         text: 'ROOT 0',
         childs: [
           new CrabTreeNode({
             id: 1,
             text: 'NODE 1',
           }),
           new CrabTreeNode({
             id: 2,
             text: 'NODE 2',
           }),
         ],
       }),
       new CrabTreeNode({
         id: 3,
         text: 'ROOT 3',
         childs: [
           new CrabTreeNode({
             id: 4,
             text: 'NODE 4',
           }),
           new CrabTreeNode({
             id: 5,
             text: 'NODE 5',
           }),
         ],
       }),
     ];
   
   }
   

Documents

documents is not complete now, see demos here