alfresco-ng2-components/docs/content-services/components/tree.component.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Tree component	v6.0.0.0	Active	2023-01-25

Tree component

Shows the nodes in tree structure, each node containing children is collapsible/expandable. Can be integrated with any datasource extending Tree service.

Basic Usage

<adf-tree
    [displayName]="'Tree display name'"
    [loadMoreSuffix]="'subnodes'"
    [emptyContentTemplate]="emptyContentTemplate"
    [nodeActionsMenuTemplate]="nodeActionsMenuTemplate"
    (paginationChanged)="onPaginationChanged($event)">
</adf-tree>

Class members

Properties

Name	Type	Default value	Description
collapseIcon	string	"expand_more"	Icon shown when node is expanded. By default set to expand_more
displayName	string		Tree display name
emptyContentTemplate	TemplateRef<any>		TemplateRef to provide empty template when no nodes are loaded
expandIcon	string	"chevron_right"	Icon shown when node has children and is collapsed. By default set to chevron_right
loadMoreSuffix	string		Load more suffix for load more button
nodeActionsMenuTemplate	TemplateRef<any>		TemplateRef to provide context menu items for context menu displayed on each row
selectableNodes	boolean	false	Variable defining if tree nodes should be selectable. By default set to false
stickyHeader	boolean	false	Variable defining if tree header should be sticky. By default set to false
contextMenuOptions	any[]		Array of context menu options which should be displayed for each row.

Events

Name	Type	Description
contextMenuOptionSelected	EventEmitter<TreeContextMenuResult<>>	Emitted when any context menu option is selected
paginationChanged	EventEmitter<PaginationModel>	Emitted when pagination has been changed

Details

Defining your own custom datasource

First of all create custom node interface extending TreeNode interface or use TreeNode when none extra properties are required.

export interface CustomNode extends TreeNode

Next create custom datasource service extending TreeService. Datasource service must implement getSubNodes method. It has to be able to provide both root level nodes as well as subnodes. If there are more subnodes to load for a given node it should add node with LoadMoreNode node type. Example of custom datasource service can be found in Category tree datasource service.

@Injectable({...})
export class CustomTreeDatasourceService extends TreeService<TreeNode> {
    ...
    public getSubNodes(parentNodeId: string, skipCount?: number, maxItems?: number): Observable<TreeResponse<TreeNode>> {
        ...
}

Final step is to provide your custom datasource service as tree service in component using TreeComponent.

providers: [
    {
        provide: TreeService,
        useClass: CustomTreeDatasourceService,
    },
]

Enabling nodes selection and listening to selection changes

First step is to provide necessary input value.

<adf-tree
    [displayName]="'Tree display name'"
    [loadMoreSuffix]="'subnodes'"
    [selectableNodes]="true"
    [emptyContentTemplate]="emptyContentTemplate"
    [nodeActionsMenuTemplate]="nodeActionsMenuTemplate"
    (paginationChanged)="onPaginationChanged($event)">
</adf-tree>

Next inside your component get the TreeComponent

@ViewChild(TreeComponent)
public treeComponent: TreeComponent<TreeNode>;

and listen to selection changes.

this.treeComponent.treeNodesSelection.changed.subscribe(
    (selectionChange: SelectionChange<TreeNode>) => {
        this.onTreeSelectionChange(selectionChange);
    }
);