# ng-tree-dropdown

> This is dropdown to display data in a tree hierarchy

Latest version **1.0.6** (published 2018-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-tree-dropdown
pnpm add ng-tree-dropdown
yarn add ng-tree-dropdown
bun add ng-tree-dropdown
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-03-19 |
| First published | 2018-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 46.3 KB |
| Known vulnerabilities | 0 (+15 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | ashishu |

## Links

- npm: https://www.npmjs.com/package/ng-tree-dropdown
- npm.io page: https://npm.io/package/ng-tree-dropdown

## Dependencies (5)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.6
- [tslib](https://npm.io/package/tslib.md) ^1.7.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.19
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.2.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.2.0

## Recent versions

- 1.0.6 (latest) — 2018-03-19
- 1.0.5 — 2018-03-19
- 1.0.4 — 2018-03-19
- 1.0.3 — 2018-03-19
- 1.0.2 — 2018-03-19
- 1.0.1 — 2018-03-19
- 1.0.0 — 2018-03-18
- 0.0.0 — 2018-03-18

## README

# Tree Dropdown for Angular 2 and above (Bootstrap v4 dropdown)

Bootstrap(v4) Dropdown to show items in tree hierarchy

[DEMO] (https://plnkr.co/edit/iPw0cO?p=preview)

# How to Use

**Step 1:** Install ng-tree-dropdown 
 - using npm:

  ```
  command 'npm install ng-tree-dropdown --save'
  ```

- or add package in "package.json":

```
  "devDependencies": {
    "ng-tree-dropdown": "*"
  }
```

**Step 2:** "app.module.ts"

```
  import { TreeDropdownModule } from 'ng-tree-dropdown';

  @NgModule({
    declarations: [
        TreeDropdownModule
    ]
  })  
```

**Step 3:** "app.component.html":

```
<tree-dropdown [treeData]="treeData" (selectedData)="onDataSelection($event)"></tree-dropdown>
```

**Step 4:** "app.component.ts":

```
import { OnInit } from "@angular/core";

export class AppComponent  implements OnInit{
    
  treeData: Array<any>;
  dropdownSelectedData: Array<any> = new Array<any>();

  ngOnInit() {

    this.treeData = [
      {
        id: 0, name: 'tree 1', childData: [
          {id: 1, name: 'child 1', childData:[]},
          {id: 2, name: 'child 2', childData:[
            {id: 3, name: 'subChild 1', childData:[]}
          ]}
        ]
      },
      {
        id: 4, name: 'tree 2', childData: [
          {id: 5, name: 'child 3', childData:[]},
          {id: 6, name: 'child 4', childData:[]}
        ]
      },
      {
        id: 7, name: 'tree 3', childData: []
      }
    ]

  }

  onDataSelection(data: any) {

    this.dropdownSelectedData = data;

  }

}
```

## Further help

Please leave comments and I will get back to you.

---
_Source: https://npm.io/package/ng-tree-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._