# sp-treeview

> ## Installation

Latest version **0.9.7** (published 2018-05-07) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install sp-treeview
pnpm add sp-treeview
yarn add sp-treeview
bun add sp-treeview
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.9.7 |
| Published | 2018-05-07 |
| First published | 2018-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 82.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | srjn45 |
| Maintainers | srjn45 |
| Keywords | angular, treeview, tree, hierarchy, dropdown, angular4, angular5 |

## Links

- npm: https://www.npmjs.com/package/sp-treeview
- Repository: https://github.com/srjn45/sp-treeview
- Homepage: https://github.com/srjn45/sp-treeview#readme
- Issues: https://github.com/srjn45/sp-treeview/issues
- npm.io page: https://npm.io/package/sp-treeview

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.9.7 (latest) — 2018-05-07
- 0.9.6 — 2018-05-05
- 0.9.5 — 2018-05-05
- 0.9.4 — 2018-05-05
- 0.9.3 — 2018-05-05
- 0.9.2 — 2018-04-07
- 0.9.1 — 2018-03-20
- 0.9.0 — 2018-03-20
- 0.1.2 — 2018-03-08
- 0.1.1 — 2018-03-04
- 0.1.0 — 2018-03-04

## README

# sp-treeview
Tree view component in material design for Angular 5

## Features
- Tree view with infinite levels
- treeview in dropdown
- single-select node with radio button
- multi-select nodes with checkbox (All, only Leaves, Topmost node)
- delete node
- add child node

## Installation

To install this library, run:

```bash
$ npm install sp-treeview --save
```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash
$ npm install sp-treeview
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import SpTreeviewModule
import { SpTreeviewModule } from 'sp-treeview';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify SpTreeviewModule as an import
    SpTreeviewModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>

<sp-treeview [nodes]="nodes" [config]="config" (change)="onChange($event)" (delete)="onDelete($event)" (addChild)="onAddChild($event)"></sp-treeview>

or

<sp-treeview-dropdown [nodes]="nodes" [config]="config" (change)="onChange($event)" (delete)="onDelete($event)" (addChild)="onAddChild($event)"></sp-treeview-dropdown>
```

## Usage

- sp-treeview/sp-treeview-dropdown takes Node[] and Config as input
- change event is fired on selection change in case of radio button/checkbox selection, delete and addChild event also fire change event
- delete event is fired when a node is deleted
- addChild event is fired to create a child of node

> <sp-treeview [nodes]="nodes" [config]="config" (change)="onChange($event)" (delete)="onDelete($event)" (addChild)="onAddChild($event)"></sp-treeview>

> <sp-treeview-dropdown [nodes]="nodes" [config]="config" (change)="onChange($event)" (delete)="onDelete($event)" (addChild)="onAddChild($event)"></sp-treeview-dropdown>

## Node

Tree is consist of nodes, each node contains

- name: string - display text
- value: any -  id or object that uniquily identifies the node
- children: Node[] - list of child nodes
- checked: boolean - if the node is selected or not
- collapsed: boolean - show child nodes or not
- disabled: boolean - node is disabled or enabled
- indeterminate: boolean - some of the child nodes are selected

## Config

Config is used to show/hide template elements or change functionality

- select: number - (default: SELECT_NONE)
    - SELECT_NONE - simple tree
    - SELECT_CHECKBOX - tree nodes with checkboxes
    - SELECT_RADIO - tree nodes with radio button
- checkedValue: number - (default: CHECKED_VALUE_ALL) which values need to be emitted in change event (only valid in case of SELECT_CHECKBOX)
    - CHECKED_VALUE_ALL - all selected nodes
    - CHECKED_VALUE_LEAVES - only the selected leave nodes
    - CHECKED_VALUE_HIGHEST_SELECTED - highest selected checkbox in every isolated branch
- deleteNode: boolean - (default: false) show/hide delete button
- addChild: boolean - (default: false) show/hide addChild button
- addChildOnLeaves: boolean - (default: false) show/hide addChild button on leave nodes
- filter: boolean - (default: true) show/hide filter
- height: string - (default: "auto") height of the dropdown
- showDropdownDefault: boolean - (default: false) show/hide dropdown by default


## License

MIT © [srjn45](mailto:srajanpathak45@gmail.com)

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