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

Tree component screenshot

Basic Usage

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

Class members

Properties

NameTypeDefault valueDescription
collapseIconstring"expand_more"Icon shown when node is expanded. By default set to expand_more
displayNamestringTree display name
emptyContentTemplateTemplateRef<any>TemplateRef to provide empty template when no nodes are loaded
expandIconstring"chevron_right"Icon shown when node has children and is collapsed. By default set to chevron_right
loadMoreSuffixstringLoad more suffix for load more button
nodeActionsMenuTemplateTemplateRef<any>TemplateRef to provide context menu items for context menu displayed on each row
selectableNodesbooleanfalseVariable defining if tree nodes should be selectable. By default set to false
stickyHeaderbooleanfalseVariable defining if tree header should be sticky. By default set to false
contextMenuOptionsany[]Array of context menu options which should be displayed for each row.

Events

NameTypeDescription
contextMenuOptionSelectedEventEmitter<TreeContextMenuResult<>>Emitted when any context menu option is selected
paginationChangedEventEmitter<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({...})
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);
    }
);

© 2023 Alfresco Software, Inc. All Rights Reserved.