angular-tree-component
- Version 8.5.6
- Published
- 1.2 MB
- 2 dependencies
- MIT license
Install
npm i angular-tree-component
yarn add angular-tree-component
pnpm add angular-tree-component
Overview
A simple yet powerful tree component for Angular2
Index
Variables
Classes
TreeComponent
- activate
- blur
- changeFilter
- copyNode
- deactivate
- deselect
- event
- focus
- focused
- initialized
- loadingTemplate
- loadNodeChildren
- moveNode
- ngOnChanges()
- nodeActivate
- nodeDeactivate
- nodes
- onKeydown()
- onMousedown()
- options
- select
- sizeChanged()
- state
- stateChange
- toggleExpanded
- treeDraggedElement
- treeModel
- treeNodeFullTemplate
- treeNodeTemplate
- treeNodeWrapperTemplate
- updateData
- viewportComponent
TreeModel
- activeNodeIds
- activeNodes
- calculateExpandedNodes()
- canMoveNode()
- clearFilter()
- collapseAll()
- copyNode()
- dispose()
- doForAll()
- eventNames
- expandAll()
- expandedNodeIds
- expandedNodes
- filterNodes()
- fireEvent()
- focusDrillDown()
- focusDrillUp()
- focusedNode
- focusedNodeId
- focusedTree
- focusNextNode()
- focusPreviousNode()
- getActiveNode()
- getActiveNodes()
- getFirstRoot()
- getFocusedNode()
- getLastRoot()
- getNodeBy()
- getNodeById()
- getNodeByPath()
- getState()
- getVisibleRoots()
- hiddenNodeIds
- hiddenNodes
- isActive()
- isEmptyTree()
- isExpanded()
- isFocused
- isHidden()
- isNodeFocused()
- isSelected()
- moveNode()
- ngOnDestroy()
- nodes
- options
- performKeyAction()
- roots
- selectedLeafNodeIds
- selectedLeafNodes
- setActiveNode()
- setData()
- setExpandedNode()
- setFocus()
- setFocusedNode()
- setHiddenNodeIds()
- setIsHidden()
- setSelectedNode()
- setState()
- subscribe()
- subscribeToState()
- unsubscribeAll()
- update()
- virtualRoot
- virtualScroll
TreeNode
- allowDrag()
- allowDragoverStyling
- allowDrop
- autoLoadChildren()
- blur()
- children
- collapse()
- collapseAll()
- data
- displayField
- dispose()
- doForAll()
- elementRef
- ensureVisible()
- expand()
- expandAll()
- findNextNode()
- findNextSibling()
- findPreviousNode()
- findPreviousSibling()
- fireEvent()
- focus()
- getClass()
- getField()
- getFirstChild()
- getLastChild()
- getNodePadding()
- getSelfHeight()
- getVisibleChildren()
- hasChildren
- height
- hide()
- id
- index
- isActive
- isAllSelected
- isCollapsed
- isDescendantOf()
- isExpanded
- isFocused
- isHidden
- isLeaf
- isPartiallySelected
- isRoot
- isSelectable()
- isSelected
- level
- loadNodeChildren()
- mouseAction()
- onDrop()
- options
- originalNode
- parent
- path
- position
- realParent
- scrollIntoView()
- setActiveAndVisible()
- setField()
- setIsActive()
- setIsExpanded()
- setIsHidden()
- setIsSelected()
- show()
- toggleActivated()
- toggleExpanded()
- toggleSelected()
- treeModel
- visibleChildren
Interfaces
ITreeOptions
- actionMapping
- allowDrag
- allowDragoverStyling
- allowDrop
- animateAcceleration
- animateExpand
- animateSpeed
- childrenField
- displayField
- dropSlotHeight
- getChildren
- getNodeClone
- hasChildrenField
- idField
- isExpandedField
- levelPadding
- nodeClass
- nodeHeight
- rootId
- rtl
- scrollContainer
- scrollOnActivate
- useCheckbox
- useTriState
- useVirtualScroll
Variables
variable KEYS
const KEYS: { LEFT: number; UP: number; RIGHT: number; DOWN: number; ENTER: number; SPACE: number; CONTEXT_MENU: number;};
variable TREE_ACTIONS
const TREE_ACTIONS: { TOGGLE_ACTIVE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; TOGGLE_ACTIVE_MULTI: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; TOGGLE_SELECTED: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; ACTIVATE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; DEACTIVATE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; SELECT: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; DESELECT: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; FOCUS: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; TOGGLE_EXPANDED: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; EXPAND: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; COLLAPSE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode; DRILL_DOWN: (tree: TreeModel, node: TreeNode, $event: any) => void; DRILL_UP: (tree: TreeModel, node: TreeNode, $event: any) => void; NEXT_NODE: (tree: TreeModel, node: TreeNode, $event: any) => void; PREVIOUS_NODE: (tree: TreeModel, node: TreeNode, $event: any) => void; MOVE_NODE: ( tree: TreeModel, node: TreeNode, $event: any, { from, to }: { from: any; to: any } ) => void;};
Classes
class LoadingComponent
class LoadingComponent {}
class TreeAnimateOpenDirective
class TreeAnimateOpenDirective {}
constructor
constructor( renderer: Renderer2, templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef);
property animateAcceleration
animateAcceleration: number;
property animateSpeed
animateSpeed: number;
property isEnabled
isEnabled: boolean;
property isOpen
isOpen: boolean;
class TreeComponent
class TreeComponent implements OnChanges {}
constructor
constructor(treeModel: TreeModel, treeDraggedElement: TreeDraggedElement);
property activate
activate: any;
property blur
blur: any;
property changeFilter
changeFilter: any;
property copyNode
copyNode: any;
property deactivate
deactivate: any;
property deselect
deselect: any;
property event
event: any;
property focus
focus: any;
property focused
focused: boolean;
property initialized
initialized: any;
property loadingTemplate
loadingTemplate: TemplateRef<any>;
property loadNodeChildren
loadNodeChildren: any;
property moveNode
moveNode: any;
property nodeActivate
nodeActivate: any;
property nodeDeactivate
nodeDeactivate: any;
property nodes
nodes: any[];
property options
options: TreeOptions;
property select
select: any;
property state
state: any;
property stateChange
stateChange: any;
property toggleExpanded
toggleExpanded: any;
property treeDraggedElement
treeDraggedElement: TreeDraggedElement;
property treeModel
treeModel: TreeModel;
property treeNodeFullTemplate
treeNodeFullTemplate: TemplateRef<any>;
property treeNodeTemplate
treeNodeTemplate: TemplateRef<any>;
property treeNodeWrapperTemplate
treeNodeWrapperTemplate: TemplateRef<any>;
property updateData
updateData: any;
property viewportComponent
viewportComponent: TreeViewportComponent;
method ngOnChanges
ngOnChanges: (changes: any) => void;
method onKeydown
onKeydown: ($event: any) => void;
method onMousedown
onMousedown: ($event: any) => void;
method sizeChanged
sizeChanged: () => void;
class TreeDragDirective
class TreeDragDirective implements AfterViewInit, DoCheck, OnDestroy {}
constructor
constructor( el: ElementRef, renderer: Renderer2, treeDraggedElement: TreeDraggedElement, ngZone: NgZone);
property draggedElement
draggedElement: any;
property treeDragEnabled
treeDragEnabled: any;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngDoCheck
ngDoCheck: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method onDrag
onDrag: (ev: any) => void;
method onDragEnd
onDragEnd: () => void;
method onDragStart
onDragStart: (ev: any) => void;
class TreeDraggedElement
class TreeDraggedElement {}
method get
get: () => any;
method isDragging
isDragging: () => boolean;
method set
set: (draggedElement: any) => void;
class TreeDropDirective
class TreeDropDirective implements AfterViewInit, OnDestroy {}
constructor
constructor( el: ElementRef, renderer: Renderer2, treeDraggedElement: TreeDraggedElement, ngZone: NgZone);
property allowDragoverStyling
allowDragoverStyling: boolean;
property onDragEnterCallback
onDragEnterCallback: EventEmitter<any>;
property onDragLeaveCallback
onDragLeaveCallback: EventEmitter<any>;
property onDragOverCallback
onDragOverCallback: EventEmitter<any>;
property onDropCallback
onDropCallback: EventEmitter<any>;
property treeAllowDrop
treeAllowDrop: any;
method allowDrop
allowDrop: ($event: any) => boolean;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method onDragEnter
onDragEnter: ($event: any) => void;
method onDragLeave
onDragLeave: ($event: any) => void;
method onDragOver
onDragOver: ($event: any) => void;
method onDrop
onDrop: ($event: any) => void;
class TreeModel
class TreeModel implements ITreeModel, OnDestroy {}
property activeNodeIds
activeNodeIds: IDTypeDictionary;
property activeNodes
readonly activeNodes: any[];
property eventNames
eventNames: string[];
property expandedNodeIds
expandedNodeIds: IDTypeDictionary;
property expandedNodes
readonly expandedNodes: any[];
property focusedNode
readonly focusedNode: any;
property focusedNodeId
focusedNodeId: IDType;
property focusedTree
static focusedTree: any;
property hiddenNodeIds
hiddenNodeIds: IDTypeDictionary;
property hiddenNodes
readonly hiddenNodes: any[];
property isFocused
readonly isFocused: boolean;
property nodes
nodes: any[];
property options
options: TreeOptions;
property roots
roots: TreeNode[];
property selectedLeafNodeIds
selectedLeafNodeIds: IDTypeDictionary;
property selectedLeafNodes
readonly selectedLeafNodes: any[];
property virtualRoot
virtualRoot: TreeNode;
property virtualScroll
virtualScroll: TreeVirtualScroll;
method calculateExpandedNodes
calculateExpandedNodes: () => void;
method canMoveNode
canMoveNode: (node: any, to: any, fromIndex?: any) => boolean;
method clearFilter
clearFilter: () => void;
method collapseAll
collapseAll: () => void;
method copyNode
copyNode: (node: any, to: any) => void;
method dispose
dispose: () => void;
method doForAll
doForAll: (fn: any) => void;
method expandAll
expandAll: () => void;
method filterNodes
filterNodes: (filter: any, autoShow?: boolean) => void;
method fireEvent
fireEvent: (event: any) => void;
method focusDrillDown
focusDrillDown: () => void;
method focusDrillUp
focusDrillUp: () => void;
method focusNextNode
focusNextNode: () => void;
method focusPreviousNode
focusPreviousNode: () => void;
method getActiveNode
getActiveNode: () => TreeNode;
method getActiveNodes
getActiveNodes: () => TreeNode[];
method getFirstRoot
getFirstRoot: (skipHidden?: boolean) => TreeNode;
method getFocusedNode
getFocusedNode: () => TreeNode;
method getLastRoot
getLastRoot: (skipHidden?: boolean) => TreeNode;
method getNodeBy
getNodeBy: (predicate: any, startNode?: any) => any;
method getNodeById
getNodeById: (id: any) => any;
method getNodeByPath
getNodeByPath: (path: any[], startNode?: any) => TreeNode;
method getState
getState: () => { expandedNodeIds: IDTypeDictionary; selectedLeafNodeIds: IDTypeDictionary; activeNodeIds: IDTypeDictionary; hiddenNodeIds: IDTypeDictionary; focusedNodeId: IDType;};
method getVisibleRoots
getVisibleRoots: () => TreeNode[];
method isActive
isActive: (node: any) => boolean;
method isEmptyTree
isEmptyTree: () => boolean;
method isExpanded
isExpanded: (node: any) => boolean;
method isHidden
isHidden: (node: any) => boolean;
method isNodeFocused
isNodeFocused: (node: any) => boolean;
method isSelected
isSelected: (node: any) => boolean;
method moveNode
moveNode: (node: any, to: any) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method performKeyAction
performKeyAction: (node: any, $event: any) => boolean;
method setActiveNode
setActiveNode: (node: any, value: any, multi?: boolean) => void;
method setData
setData: ({ nodes, options, events,}: { nodes: any; options: any; events: any;}) => void;
method setExpandedNode
setExpandedNode: (node: any, value: any) => void;
method setFocus
setFocus: (value: any) => void;
method setFocusedNode
setFocusedNode: (node: any) => void;
method setHiddenNodeIds
setHiddenNodeIds: (nodeIds: any) => void;
method setIsHidden
setIsHidden: (node: any, value: any) => void;
method setSelectedNode
setSelectedNode: (node: any, value: any) => void;
method setState
setState: (state: any) => void;
method subscribe
subscribe: (eventName: any, fn: any) => void;
method subscribeToState
subscribeToState: (fn: any) => void;
method unsubscribeAll
unsubscribeAll: () => void;
method update
update: () => void;
class TreeModule
class TreeModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class TreeNode
class TreeNode implements ITreeNode {}
constructor
constructor(data: any, parent: TreeNode, treeModel: TreeModel, index: number);
property allowDragoverStyling
allowDragoverStyling: () => boolean;
property allowDrop
allowDrop: (element: any, $event?: any) => boolean;
property children
children: TreeNode[];
property data
data: any;
property displayField
readonly displayField: any;
property elementRef
readonly elementRef: any;
property hasChildren
readonly hasChildren: boolean;
property height
height: number;
property id
id: any;
property index
index: number;
property isActive
readonly isActive: boolean;
property isAllSelected
readonly isAllSelected: boolean;
property isCollapsed
readonly isCollapsed: boolean;
property isExpanded
readonly isExpanded: boolean;
property isFocused
readonly isFocused: boolean;
property isHidden
readonly isHidden: boolean;
property isLeaf
readonly isLeaf: boolean;
property isPartiallySelected
readonly isPartiallySelected: boolean;
property isRoot
readonly isRoot: boolean;
property isSelected
readonly isSelected: boolean;
property level
readonly level: number;
property options
readonly options: TreeOptions;
property originalNode
readonly originalNode: any;
property parent
parent: TreeNode;
property path
readonly path: string[];
property position
position: number;
property realParent
readonly realParent: TreeNode;
property treeModel
treeModel: TreeModel;
property visibleChildren
readonly visibleChildren: TreeNode[];
method allowDrag
allowDrag: () => boolean;
method autoLoadChildren
autoLoadChildren: () => void;
method blur
blur: () => this;
method collapse
collapse: () => this;
method collapseAll
collapseAll: () => void;
method dispose
dispose: () => void;
method doForAll
doForAll: (fn: (node: ITreeNode) => any) => void;
method ensureVisible
ensureVisible: () => this;
method expand
expand: () => this;
method expandAll
expandAll: () => void;
method findNextNode
findNextNode: (goInside?: boolean, skipHidden?: boolean) => any;
method findNextSibling
findNextSibling: (skipHidden?: boolean) => any;
method findPreviousNode
findPreviousNode: (skipHidden?: boolean) => any;
method findPreviousSibling
findPreviousSibling: (skipHidden?: boolean) => any;
method fireEvent
fireEvent: (event: any) => void;
method focus
focus: (scroll?: boolean) => this;
method getClass
getClass: () => string;
method getField
getField: (key: any) => any;
method getFirstChild
getFirstChild: (skipHidden?: boolean) => TreeNode;
method getLastChild
getLastChild: (skipHidden?: boolean) => TreeNode;
method getNodePadding
getNodePadding: () => string;
method getSelfHeight
getSelfHeight: () => number;
method getVisibleChildren
getVisibleChildren: () => TreeNode[];
method hide
hide: () => void;
method isDescendantOf
isDescendantOf: (node: TreeNode) => any;
method isSelectable
isSelectable: () => boolean;
method loadNodeChildren
loadNodeChildren: () => Promise<void>;
method mouseAction
mouseAction: (actionName: string, $event: any, data?: any) => void;
method onDrop
onDrop: ($event: any) => void;
method scrollIntoView
scrollIntoView: (force?: boolean) => void;
method setActiveAndVisible
setActiveAndVisible: (multi?: boolean) => this;
method setField
setField: (key: any, value: any) => void;
method setIsActive
setIsActive: (value: any, multi?: boolean) => this;
method setIsExpanded
setIsExpanded: (value: any) => this;
method setIsHidden
setIsHidden: (value: any) => void;
method setIsSelected
setIsSelected: (value: any) => this;
method show
show: () => void;
method toggleActivated
toggleActivated: (multi?: boolean) => this;
method toggleExpanded
toggleExpanded: () => this;
method toggleSelected
toggleSelected: () => this;
class TreeNodeCheckboxComponent
class TreeNodeCheckboxComponent {}
property node
node: TreeNode;
class TreeNodeChildrenComponent
class TreeNodeChildrenComponent {}
class TreeNodeCollectionComponent
class TreeNodeCollectionComponent implements OnInit, OnDestroy {}
property marginTop
readonly marginTop: string;
property nodes
nodes: any;
property templates
templates: any;
property treeModel
treeModel: TreeModel;
property viewportNodes
viewportNodes: TreeNode[];
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method setNodes
setNodes: (nodes: any) => void;
method trackNode
trackNode: (index: any, node: any) => any;
class TreeNodeComponent
class TreeNodeComponent {}
class TreeNodeContent
class TreeNodeContent {}
class TreeNodeDropSlot
class TreeNodeDropSlot {}
class TreeNodeExpanderComponent
class TreeNodeExpanderComponent {}
property node
node: TreeNode;
class TreeNodeWrapperComponent
class TreeNodeWrapperComponent {}
constructor
constructor();
property index
index: number;
property node
node: TreeNode;
property templates
templates: any;
class TreeViewportComponent
class TreeViewportComponent implements AfterViewInit, OnInit, OnDestroy {}
constructor
constructor( elementRef: ElementRef, ngZone: NgZone, virtualScroll: TreeVirtualScroll);
property setViewport
setViewport: any;
property virtualScroll
virtualScroll: TreeVirtualScroll;
method getTotalHeight
getTotalHeight: () => string;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
class TreeVirtualScroll
class TreeVirtualScroll {}
constructor
constructor(treeModel: TreeModel);
property totalHeight
readonly totalHeight: number;
property viewport
viewport: any;
property viewportHeight
viewportHeight: any;
property x
x: number;
property y
readonly y: number;
property yBlocks
yBlocks: number;
method clear
clear: () => void;
method fireEvent
fireEvent: (event: any) => void;
method fixScroll
fixScroll: () => void;
method getViewportNodes
getViewportNodes: (nodes: any) => any;
method init
init: () => void;
method isEnabled
isEnabled: () => boolean;
method recalcPositions
recalcPositions: () => void;
method scrollIntoView
scrollIntoView: (node: any, force: any, scrollToMiddle?: boolean) => void;
method setViewport
setViewport: (viewport: any) => void;
Interfaces
interface IActionHandler
interface IActionHandler {}
call signature
(tree: TreeModel, node: TreeNode, $event: any, ...rest: any[]): any;
interface IActionMapping
interface IActionMapping {}
property keys
keys?: { [key: number]: IActionHandler;};
property mouse
mouse?: { click?: IActionHandler; dblClick?: IActionHandler; contextMenu?: IActionHandler; expanderClick?: IActionHandler; checkboxClick?: IActionHandler; dragStart?: IActionHandler; drag?: IActionHandler; dragEnd?: IActionHandler; dragOver?: IActionHandler; dragLeave?: IActionHandler; dragEnter?: IActionHandler; drop?: IActionHandler; mouseOver?: IActionHandler; mouseOut?: IActionHandler;};
interface IAllowDragFn
interface IAllowDragFn {}
call signature
(node: TreeNode): boolean;
interface IAllowDropFn
interface IAllowDropFn {}
call signature
( element: any, to: { parent: TreeNode; index: number; }, $event?: any): boolean;
interface ITreeOptions
interface ITreeOptions {}
property actionMapping
actionMapping?: any;
Rewire which trigger causes which action using this attribute, or create custom actions / event bindings. See the [Action Mapping Section](https://angular2-tree.readme.io/docs/action-mapping) for more details.
property allowDrag
allowDrag?: boolean | IAllowDragFn;
Specify if dragging tree nodes is allowed. This could be a boolean, or a function that receives a TreeNode and returns a boolean
**Default value: false**
Example: ``` options = { allowDrag: true } ```
property allowDragoverStyling
allowDragoverStyling?: boolean;
Boolean flag to allow adding and removing is-dragging-over and is-dragging-over-disabled classes.
If set to false it will not add the above mentioned classes and you should handle the styling yourself with css and in the actionMapping -> mouse -> dragEnter, dragLeave
**Default Value: true**
example: ``` options = { allowDrop: true, allowDragoverStyling: false } ```
property allowDrop
allowDrop?: boolean | IAllowDropFn;
Specify whether dropping inside the tree is allowed. Optional types: - boolean - (element:any, to:{parent:TreeNode, index:number}):boolean A function that receives the dragged element, and the drop location (parent node and index inside the parent), and returns true or false.
**Default Value: true**
example: ``` options = { allowDrop: (element, {parent, index}) => parent.isLeaf } ```
property animateAcceleration
animateAcceleration?: number;
Increase of expand animation speed (described in multiply per 17 ms).
**Default Value: 1.2**
property animateExpand
animateExpand?: boolean;
Boolean whether or not to animate expand / collapse of nodes.
**Default Value: false**
property animateSpeed
animateSpeed?: number;
Speed of expand animation (described in pixels per 17 ms).
**Default Value: 30**
property childrenField
childrenField?: string;
A string representing the attribute of the node that contains the array of children.
**Default value:
children
.**For example, if your nodes have a
nodes
attribute, that contains the children, use: ``` options = { childrenField: 'nodes' } ```
property displayField
displayField?: string;
A string representing the attribute of the node to display.
**Default value:
name
**For example, if your nodes have a
title
attribute that should be displayed, use: ``` options = { displayField: 'title' } ```
property dropSlotHeight
dropSlotHeight?: number;
For use with
useVirtualScroll
option. Specify a height for drop slots (located between nodes) in pixels**Default Value: 2**
property getChildren
getChildren?: (node: TreeNode) => any;
Function for loading a node's children. The function receives a TreeNode, and returns a value or a promise that resolves to the node's children.
This function will be called whenever a node is expanded, the
hasChildren
(options.hasChildrenField
) field is true, and thechildren
field is empty. The result will be loaded into the node's children attribute.Example: ``` options = { getChildren: (node:TreeNode) => { return request('/api/children/' + node.id); } } ```
property getNodeClone
getNodeClone?: (node: TreeNode) => any;
Function to clone a node. Receives a TreeNode object, and returns a node object (only the data). This callback will be called when copying a node inside the tree, by either calling copyNode, or by dragging and holding the ctrl key
For example: ``` options: ITreeOptions = { getNodeClone: (node) => ({ ...node.data, id: uuid.v4(), name:
copy of ${node.data.name}
}) }; ```**Default Value: clone the node using Object.assign, and remove 'id' property**
property hasChildrenField
hasChildrenField?: string;
A string representing the attribute of the node that indicates whether there are child nodes.
**Default value:
hasChildren
.**For example, if your nodes have an
isDirectory
attribute that indicates whether there are children, use: ``` options = { hasChildrenField: 'isDirectory' } ```
property idField
idField?: string;
A string representing the attribute of the node that contains the unique ID. This will be used to construct the
path
, which is an array of IDs that point to the node.**Default value:
id
.**For example, if your nodes have a
uuid
attribute, that contains the unique key, use: ``` options = { idField: 'uuid' } ```
property isExpandedField
isExpandedField?: string;
A string representing the attribute of the node that contains whether the node starts as expanded.
**Default value:
isExpanded
.**For example, if your nodes have an
expanded
attribute, that contains a boolean value, use: ``` options = { isExpandedField: 'expanded' } ```
property levelPadding
levelPadding?: number;
Specify padding per node (integer). Each node will have padding-left value of level * levelPadding, instead of using the default padding for children.
This option is good for example for allowing whole row selection, etc.
You can alternatively use the tree-node-level-X classes to give padding on a per-level basis.
**Default value: 0**
property nodeClass
nodeClass?: (node: TreeNode) => string;
Specify a function that returns a class per node. Useful for styling the nodes individually.
Example: ``` options = { nodeClass: (node:TreeNode) => { return 'icon-' + node.data.icon; } } ```
property nodeHeight
nodeHeight?: number | INodeHeightFn;
For use with
useVirtualScroll
option. Specify a height for nodes in pixels. Could be either: - number - (node: TreeNode) => number**Default Value: 22**
property rootId
rootId?: any;
Specifies id of root node (virtualRoot)
property rtl
rtl?: boolean;
Makes the tree right-to-left. This include direction, expander style, and change key binding (right key collapse and left key expands instead of vice-versa)
property scrollContainer
scrollContainer?: HTMLElement;
The HTML element that is the scroll container for the tree. The default behaviour is to wrap the tree with a container that has overflow: hidden, and then the scrolling container is the viewport inside the tree component
property scrollOnActivate
scrollOnActivate?: boolean;
Whether to scroll to the node to make it visible when it is activated.
**Default Value: true**
property useCheckbox
useCheckbox?: boolean;
Whether to display a checkbox next to the node or not
property useTriState
useTriState?: boolean;
Whether to use master checkboxes mechanism if the useCheckbox is set to true
property useVirtualScroll
useVirtualScroll?: boolean;
Boolean flag to use the virtual scroll option.
To use this option, you must supply the height of the container, and the height of each node in the tree.
You can also specify height for the dropSlot which is located between nodes.
**Default Value: false**
example: ``` options = { useVirtualScroll: true, nodeHeight: (node: TreeNode) => node.myHeight, dropSlotHeight: 3 } ```
interface ITreeState
interface ITreeState {}
property activeNodeIds
activeNodeIds?: IDTypeDictionary;
property expandedNodeIds
expandedNodeIds?: IDTypeDictionary;
property focusedNodeId
focusedNodeId?: IDType;
property hiddenNodeIds
hiddenNodeIds?: IDTypeDictionary;
property selectedLeafNodeIds
selectedLeafNodeIds?: IDTypeDictionary;
property selectedNodeIds
selectedNodeIds?: IDTypeDictionary;
Package Files (22)
- dist/angular-tree-component.d.ts
- dist/components/loading.component.d.ts
- dist/components/tree-node-checkbox.component.d.ts
- dist/components/tree-node-children.component.d.ts
- dist/components/tree-node-collection.component.d.ts
- dist/components/tree-node-content.component.d.ts
- dist/components/tree-node-drop-slot.component.d.ts
- dist/components/tree-node-expander.component.d.ts
- dist/components/tree-node-wrapper.component.d.ts
- dist/components/tree-node.component.d.ts
- dist/components/tree-viewport.component.d.ts
- dist/components/tree.component.d.ts
- dist/constants/keys.d.ts
- dist/defs/api.d.ts
- dist/directives/tree-animate-open.directive.d.ts
- dist/directives/tree-drag.directive.d.ts
- dist/directives/tree-drop.directive.d.ts
- dist/models/tree-dragged-element.model.d.ts
- dist/models/tree-node.model.d.ts
- dist/models/tree-options.model.d.ts
- dist/models/tree-virtual-scroll.model.d.ts
- dist/models/tree.model.d.ts
Dependencies (2)
Dev Dependencies (40)
- @angular-devkit/core
- @angular/cli
- @angular/common
- @angular/compiler
- @angular/compiler-cli
- @angular/core
- @angular/platform-browser
- @angular/platform-browser-dynamic
- @angular/platform-server
- @types/jasmine
- @types/lodash
- @types/node
- @types/rx
- @types/webpack
- codelyzer
- concurrently
- core-js
- growl
- hoek
- html-dnd
- http-server
- husky
- lint-staged
- nightwatch
- prettier
- protractor
- protractor-jasmine2-html-reporter
- rimraf
- rollup
- rollup-plugin-auto-external
- rollup-plugin-commonjs
- rollup-plugin-node-resolve
- rollup-plugin-uglify
- rxjs
- testcafe
- testcafe-browser-provider-saucelabs
- tslint
- typedoc
- typescript
- zone.js
Peer Dependencies (1)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/angular-tree-component
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/angular-tree-component)
- HTML<a href="https://www.jsdocs.io/package/angular-tree-component"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2454 ms. - Missing or incorrect documentation? Open an issue for this package.