Tree component

import { DAYTreeComponent } from '/tree';

Selectors

Tree: day-tree

Installation and Usage

npm install @dayerlin-bustamante/tree

import { DAYTreeComponent } from '@dayerlin-bustamante/tree';

<day-tree [data]="treeData"/>

Injector

Not included

Inputs

Name	Description	Default
data: any[]	The array of tree node data to render.	—
nameProperty: string	The property name used to display the node label.	'name'
childProperty: string	The property name containing child nodes.	'children'
childItems: (item: any) => any[]	Optional function to retrieve child nodes for a given item.	-

Output

Name	Description	Default
nodeSelected: any	Emits when a tree node is selected.	—

Directives

Name	Description	Default
DAYTreeItemTmplDirective	Optional custom template for rendering tree items.	—

Public methods

Not included

Description

The day-tree component is a solution for visualizing and managing hierarchical data.
It allows flexible content projection per node and offers intuitive navigation with expand/collapse functionalities.
It supports data structure customization, day-icon integration, smooth animations, and emits node selection events.

Example

Html

Demo

Nivel 1 - Carpeta A

Nivel 1 - Carpeta B

Nivel 1 - Carpeta C (vacía)

Nivel 1 - Documento suelto

Dependencies

'/core'

'/icon'