# crab-tree

**Repository Path**: hungtcs/crab-tree

## Basic Information

- **Project Name**: crab-tree
- **Description**: angular tree view component
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/crab-tree
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-10-28
- **Last Updated**: 2021-10-15

## Categories & Tags

**Categories**: angular-extensions

**Tags**: None

## README

Crab Tree
====

Angular Tree View Component

### Installation

using yarn
```shell
yarn add crab-tree
```
or using npm
```shell
npm install --save crab-tree
```

### Getting Started
1. import `CrabTreeModule` into your angular module.
    ```ts
    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
    ```html
    <crab-tree-root [nodes]="nodes"></crab-tree-root>
    ```

3. provider the data in your component
    ```ts
    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](https://crab-tree.hungtcs.top?_time=1540905730433)