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
emptyContentTemplate	TemplateRef		Template that will be rendered when no nodes are loaded.
nodeActionsMenuTemplate	TemplateRef		Template that will be rendered when context menu for given node is opened.
stickyHeader	boolean	false	If set to true header will be sticky.
selectableNodes	boolean	false	If set to true nodes will be selectable.
displayName	string		Display name for tree title.
loadMoreSuffix	string		Suffix added to Load more string inside load more node.
expandIcon	string	chevron_right	Icon shown when node is collapsed.
collapseIcon	string	expand_more	Icon showed when node is expanded.

Events

Name	Type	Description
paginationChanged	EventEmitter<PaginationModel>	Emitted when during loading additional nodes pagination changes.

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);
    }
);