Virtual Tree Guide

The tree above is a virtualized tree listing all the files under node_modules for a regular angular project. So many files, right?

This is the of-tree. You can get it for your angular project from NPM. Here's the source code.

Mess around and try stuff like expand-all, search, arrow keys, etc. Click an item and hold down the right arrow.

Templating

Just look at those old-school tree connector lines on that tree. Trees these days ain't like they used to be.

For total flexibility of appearance and behavior, use an of-virtual-tree

Minimal setup for an of-virtual-tree

<of-virtual-tree [model]="model" [itemHeight]="25">
    <ng-template let-node>
        <div [style.paddingLeft.px]="node.depth * 15">{{node.item.name}}<div>
    </ng-template>
</of-virtual-tree>

1. [itemHeight] input should be the height of each item in the tree
2. [model] input should be an instance of an OfVirtualTree(config)<MyDataType>. In the config, provide an object with these members
   1. canExpand a function accepting MyDataType, returning a bool indicating whether the item can be expanded, e.g., (item: MyDataType) => item.isFolder ? true : false
   2. childAccessor a function accepting MyDataType, returning undefined or an array or MyDataType, e.g., (item: MyDataType) => item.subItems
3. Add an <ng-template let-node></ng-template>. In the ng-template, add elements representing a single tree node, using the tree model and the let-node variable. node has properties such as depth, parent, isLastChild, item (which is your original data), children, etc.

class Node

Node Properties

Name	Type	Readonly	Notes
depth	number		The depth of this node or the number of its ancestors
index	number		Index relative to the parent
item	T		The data item which this node wraps
parent	Node | undefined		The parent node of this node
prev	Node | undefined		The previous sibling of this node
children	ReadonlyArray>	Y	The children of this node
childrenLoaded	boolean	Y	Check whether lazy loaded children have been loaded
firstChild	Node | undefined	Y	Gets the first of this node's children
hasChildren	boolean	Y	Bool indicating whether this node has children
isFirstChild	boolean	Y	Bool indicating whether this is the first among its siblings
isLastChild	boolean	Y	Bool indicating whether this is the last among its siblings
isRoot	boolean	Y	Bool indicating if this is a root node
lastChild	Node | undefined	Y	Gets the last of this node's children
next	Node	Y	The forward sibling to this node

Node Methods

Name	Signature	Notes
ancestorForward	CallSignature ancestorForward:any	Get the nearest next sibling among ancestor nodes
ancestors	CallSignature ancestors:IterableIterator>	Creates an iterator of this node's ancestors nearest first
forwardNode	CallSignature forwardNode:Node | undefined Parameter wrap:boolean	Get the nearest next node. If this is the last of its siblings, the nearest ancestor's next sibling is returned. If wrap is true and if this is the last node of the tree, the root is next. If wrap is false and if this is the last node of the tree, undefined is next. If next is this node, then undefined is returned.
getRoot	CallSignature getRoot:Node	Get the root node of this node
invalidateChildren	CallSignature invalidateChildren:void Parameter reloadNow:boolean
lastDescendant	CallSignature lastDescendant:Node | undefined
reverseNode	CallSignature reverseNode:Node | undefined Parameter wrap:boolean
visitSubtree	CallSignature visitSubtree:void Parameter visitor:function TypeLiteral __type CallSignature __call:void Parameter node:Node

class TreeQuery

TreeQuery Properties

Name	Type	Readonly	Notes

TreeQuery Methods

Name	Signature	Notes
ascend	CallSignature ascend:TreeQuery Parameter from:T Parameter wrap:boolean	Visit items in the hierarchy in order from top to bottom regardless of depth
count	CallSignature count:number	Get the number of items in the hierarchy
descend	CallSignature descend:TreeQuery Parameter from:T Parameter wrap:boolean	Depth first, visit items in the hierarchy in order from top to bottom
findNode	CallSignature findNode:Node Parameter item:T	O(1) return the node of the passed item, or undefined if the item is not loaded in this hierarchy
first	CallSignature first:T	Get the first item
forwardOverride	CallSignature forwardOverride:TreeQuery Parameter provider:function TypeLiteral __type CallSignature __call:undefined | Node Parameter current:Node Parameter defaultNext:function TypeLiteral __type CallSignature __call:Node | undefined	Control descend behavior and override any preexisting descend behavior
getRootNode	CallSignature getRootNode:Node	Get the root node of this tree. The root node is a container of other nodes.
hasDescendant	CallSignature hasDescendant:TreeQuery Parameter filter:function TypeLiteral __type CallSignature __call:boolean Parameter item:T Parameter excludeMatch:boolean	Apply a filter by item which yields the nodes which have descendants matching the filter
hasDescendantNode	CallSignature hasDescendantNode:TreeQuery Parameter filter:function TypeLiteral __type CallSignature __call:boolean Parameter node:Node Parameter excludeMatch:boolean	Apply a filter by node which yields the nodes which have descendants matching the filter
nth	CallSignature nth:any Parameter n:number	Get a single item at the given index
provideNext	CallSignature provideNext:this Parameter provider:function TypeLiteral __type CallSignature __call:undefined | Node Parameter current:Node Parameter defaultNext:function TypeLiteral __type CallSignature __call:Node | undefined	Control descend behavior and skip iterating branches
skip	CallSignature skip:TreeQuery Parameter count:number	Pagination-like, skip past a number of items. Iterarting will not yield that number of items
take	CallSignature take:TreeQuery Parameter count:number	Pagination-like, iterate through an exact number of items. Iteration ends after that number is reached
toArray	CallSignature toArray:any[]	Convenience method for iterating and returning the iterated items as an array
where	CallSignature where:TreeQuery Parameter filter:function TypeLiteral __type CallSignature __call:boolean Parameter item:T	Apply filter by item, so that only items passing the filter are yielded during iteration
whereNode	CallSignature whereNode:TreeQuery Parameter filter:function TypeLiteral __type CallSignature __call:boolean Parameter node:Node	Apply filter by node, so that only nodes passing the filter are yielded during iteration
init	CallSignature init:TreeQuery TypeParameter T Parameter items:T[] Parameter childAccessor:function TypeLiteral __type CallSignature __call:T[] | undefined Parameter item:T Parameter eagerLoad:boolean	Create a tree query, starting with an arbitrary data set, and a delegate for loading child items

class VirtualRenderArea

VirtualRenderArea Properties

Name	Type	Readonly	Notes
itemCount	number	N
itemHeight	number	N
scrollPos	number	N
topBuffer	number	Y
totalHeight	number	Y
viewerHeight	number	N
visibleCount	number	Y
visibleStart	number	Y

VirtualRenderArea Methods

Name	Signature	Notes

class OfVirtualTree

OfVirtualTree Properties

Name	Type	Readonly	Notes
items	Node[]
onDataInvalidated	EventEmitter
onHighlightChanged	EventEmitter
onSelectionChanged	EventEmitter
query	TreeQuery	Y

OfVirtualTree Methods

Name	Signature	Notes
collapseAll	CallSignature collapseAll:void
expandAll	CallSignature expandAll:void
expandToItem	CallSignature expandToItem:void Parameter item:ItemType	Expand all ancestry of the passed item
expandToSelectedItem	CallSignature expandToSelectedItem:void	Expand all ancestry of the currently selected item
getHighlightedItem	CallSignature getHighlightedItem:ItemType	Get the item that is currently highlighted
getItemIndex	CallSignature getItemIndex:number Parameter item:ItemType
getSelectedIndex	CallSignature getSelectedIndex:number
getSelectedItem	CallSignature getSelectedItem:ItemType	Get the item that is currently selected
getTreeNode	CallSignature getTreeNode:Node Parameter item:ItemType	Get the TreeQuery's node for the passed item
highlight	CallSignature highlight:void Parameter item:ItemType | undefined	Set the currently highlighted item
highlightByIndex	CallSignature highlightByIndex:void Parameter index:number | undefined
invalidateData	CallSignature invalidateData:void	Signal that the state has changed and the tree needs to be revisited
invalidateItem	CallSignature invalidateItem:void Parameter item:ItemType Parameter reloadImmediately:boolean	Signal that the children of a node have changed and the node needs to have the children reloaded
isExpandable	CallSignature isExpandable:boolean Parameter item:ItemType	Returns true if the passed item is expandable
isExpanded	CallSignature isExpanded:boolean Parameter item:ItemType
isFiltered	CallSignature isFiltered:boolean
isHighlighted	CallSignature isHighlighted:boolean Parameter item:ItemType
isSelected	CallSignature isSelected:boolean Parameter item:ItemType
load	CallSignature load:void Parameter items:ItemType[]	Update data from the root
navigate	CallSignature navigate:any Parameter direction:string | "Left" | "Right" | "Up" | "Down"	Change the highlighted node by the given direction. 'Left' will collapse before navigation. 'Right' will expand before navigation.
reloadChildren	CallSignature reloadChildren:void Parameter parent:ItemType	Signal children to be reloaded for a particular node. Has no effect if the passed parent has not been loaded
reloadTree	CallSignature reloadTree:void	Signal the tree to reload all data
select	CallSignature select:void Parameter item:ItemType	Set the currently highlighted item
selectAndHighlight	CallSignature selectAndHighlight:void Parameter item:ItemType	Set the passed item as the currently selected and highlighted item
selectHighlightedItem	CallSignature selectHighlightedItem:boolean	Selects the highlighted node, and toggles its expand state
setExpanded	CallSignature setExpanded:void Parameter item:ItemType Parameter expanded:boolean	Set the expanded state of an item. This does nothing if the item is not expandable or already in the desired state This does not update the UI. Expect to call invalidateData/invalidateItem to see the effect.
setFilter	CallSignature setFilter:void Parameter filter:undefined | function	Apply a filter that ignore expand state and makes visible all nodes that either match the predicate or contain a child that matches the predicate
toggle	CallSignature toggle:void Parameter item:ItemType	Toggle the expanded state of the passed item
updateConfig	CallSignature updateConfig:void Parameter value:OfTreeConfig

component OfVirtualTreeComponent

<of-virtual-tree [itemHeight] [model]></of-virtual-tree>

OfVirtualTreeComponent Properties

Name	Type	Readonly	Notes
itemHeight	number	N	Height each item in the tree
model	OfVirtualTree	N	An instance of an OfVirtualTree configured to your dataset

OfVirtualTreeComponent Methods

Name	Signature	Notes
getScrollPos	CallSignature getScrollPos:number	Get the current scroll offset, pixels
invalidateSize	CallSignature invalidateSize:void	Fix issues occurring from tree container's height has changed
scrollTo	CallSignature scrollTo:void Parameter offset:number	Scroll to a certain position
scrollToIndex	CallSignature scrollToIndex:void Parameter index:number	Scroll the container until the item at the index is in view. If the item at the index is already in view, do nothing.
scrollToItem	CallSignature scrollToItem:void Parameter item:any	Scroll the container until the item is in view. If the item is already in view, do nothing.
scrollToSelected	CallSignature scrollToSelected:void	Scroll the container until the selected item is in view. If the selected item is already in view, do nothing.
syncScrollPos	CallSignature syncScrollPos:void	Adjust the DOM scroll position to match the VirtualRenderArea scroll postion, and vice versa. This can fix some issues that occur after DOM height changes

component OfBasicTreeComponent

<of-basic-tree (iconClick) (itemContextMenu) [itemHeight] (labelClick) (rowClick) (selectionChange) [config] [data] [filter] [filterText] [model] [selection]></of-basic-tree>

OfBasicTreeComponent Properties

Name	Type	Readonly	Notes
iconClick	EventEmitter		Click event that fires on click of the icon portion of a tree row
itemContextMenu	EventEmitter		ContextMenu event on tree rows, allows custom right-click menus
itemHeight	number		Height in pixels of each row in the tree
labelClick	EventEmitter		Click event that fires on click of the label portion of a tree row
rowClick	EventEmitter		Click event that fires on click of any part of a tree row
selectionChange	EventEmitter		Fires on change of the selected item, [selection]
config	object	N	The config for the tree
isFiltered	boolean	Y	returns true if filterText or a filter function is applied
model	OfVirtualTree	N	Get the current model or set a custom model for the tree

OfBasicTreeComponent Methods

Name	Signature	Notes
navigateToItem	CallSignature navigateToItem:void Parameter item:any	Scrolls and expands nodes so that the passed item is visible in the tree
navigateToSelection	CallSignature navigateToSelection:void	Scrolls and expands nodes so that the selected item is visible in the tree

class SetAttrsDirective

SetAttrsDirective Properties

Name	Type	Readonly	Notes

SetAttrsDirective Methods

Name	Signature	Notes

class OfVirtualTreeModule

OfVirtualTreeModule Properties

Name	Type	Readonly	Notes

OfVirtualTreeModule Methods

Name	Signature	Notes