Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/srjn45/sp-treeview
Tree view component in material design for Angular 5
https://github.com/srjn45/sp-treeview
angular5 checkbox-treeview chips material-components radio-buttons treeview
Last synced: 18 days ago
JSON representation
Tree view component in material design for Angular 5
- Host: GitHub
- URL: https://github.com/srjn45/sp-treeview
- Owner: srjn45
- License: mit
- Created: 2018-03-03T09:36:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-07T05:23:20.000Z (over 6 years ago)
- Last Synced: 2024-12-31T17:36:15.301Z (26 days ago)
- Topics: angular5, checkbox-treeview, chips, material-components, radio-buttons, treeview
- Language: TypeScript
- Size: 218 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
{{title}}
or
```
## 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
>
>
## 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:[email protected])