ng2-tree-select
v0.0.8
Published
This is a pair of simple tree components for Angular 2+ (built with Angular 6) that provide lazy loading.
Downloads
8
Maintainers
Readme
Ng2TreeSelect, Ng2TreeView
(aka ng2-tree-select & ng2-gree-view)
This is a pair of simple tree components for Angular 2+ (built with Angular 6) that provide lazy loading.
##TreeItem
These components use class TreeItem internally:
export class TreeItem {
id: string;
name: string;
parent: string;
children: TreeItem[];
isLoaded: boolean;
isOpen: boolean;
get hasChildren() {
return this.children && this.children.length > 0;
}
selected: boolean;
constructor(id: string, name: string, parent: string = null) {
this.id = id;
this.name = name;
this.parent = parent;
}
}
ng2-tree-veiw
Usage:
<ng2-tree-view
[items]="items"
[lazyLoad]="true|false"
[(select)]="select"
(load)="loadCallback"
(loadBranch)="loadBranchCallback"
(loadPeers)="loadPeersCallback"
(itemSelected)="itemSelectedCallback"
></ng-tree-view>
where:
items
— optional array ofTreeItem
objects;lazyLoad
- option to use callbacks to load tree items dynamically;select
- a two-way binded selected object;load
- an event listener that is called whenngInit()
life-cycle callback of theng-tree-view
is called;loadBranchCallback($event)
- an event listener that is being called when some tree branch (i.e. all the nodes lying higher than a particular one) has to be loaded; used whithlazyLoad="true"
option only; params:child: string
- id of the node, which corresponded branch should be loaded;
after needed elements are loaded from an external resource,
Ng2TreeService
'sbranchLoadEvent
should be emitted like this:this.Ng2TreeService.branchLoadEvent.emit(loadedItems);
loadPeers($event)
- an event listener that is being called when all the peer nodes lying underneath of a particular parent should be loaded; params:parent: string
- id of tha parent node whose children should be loaded;
after needed elements are loaded from the external resource,
Ng2TreeService
'speersLoadEvent
should be emitted like this:this.Ng2TreeService.peersLoadEvent.emit(items);
itemSelected($event)
- an event listener that is being called when an item (TreeItem
) selected inside of the tree.
ng2-tree-select
Usage:
<ng2-tree-select
[items]="items"
[lazyLoad]="true|false"
[(select)]="select"
(load)="loadCallback"
(loadBranch)="loadBranchCallback"
(loadPeers)="loadPeersCallback"
(itemSelected)="itemSelectedCallback"
[alignRight]="true|false"
[dropup]="true|false"
></ng-tree-select>
where:
alignRight
- should the drop-down with tree's elements be aligned along the right border of the select?dropup
- should the drop-down be shown higher than the select? (look at the bootstrap's dropdowns to get the idea).
Requirements
- Angular 2+,
- Bootstrap 4.