Bootstrap

API tree

createTree

function

createTree(props?): TreeWidget

Create a Tree with given config props

Parameters
props?

PropsConfig<TreeProps>

Returns

TreeWidget

a TreeWidget

getTreeDefaultConfig

function

getTreeDefaultConfig(): TreeProps

Retrieve a shallow copy of the default Tree config

Returns

TreeProps

the default Tree config

NormalizedTreeItem

interface

Normalized TreeItem object

Properties
ariaLabel

ariaLabel: string

Accessibility label for the node

children

children: NormalizedTreeItem[]

An array of children nodes

isExpanded?

optional isExpanded: boolean

If true the node is expanded

label

label: string

String title of the node

level

level: number

Level in the hierarchy, starts with 0 for a root node

TreeApi

interface

Interface representing the API for a Tree component.

TreeComponent

class

TreeComponent is an Angular component that extends the BaseWidgetDirective to provide a customizable tree widget. This component allows for various configurations and customizations through its inputs and outputs.

Properties
ariaLabel

readonly ariaLabel: InputSignal<undefined | string>

Optional accessibility label for the tree if there is no explicit label

Default Value

''

ariaLabelToggleFn

readonly ariaLabelToggleFn: InputSignal<undefined | (label) => string>

Return the value for the 'aria-label' attribute of the toggle

Param

tree item label

Default Value
(label: string) => `Toggle ${label}`
className

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

Default Value

''

expandToggle

readonly expandToggle: OutputEmitterRef<NormalizedTreeItem>

An event emitted when the user toggles the expand of the TreeItem.

Event payload is equal to the TreeItem clicked.

Default Value
() => {}
item

readonly item: InputSignal<SlotContent<TreeSlotItemContext>>

Slot to change the default tree item

itemContent

readonly itemContent: InputSignal<SlotContent<TreeSlotItemContext>>

Slot to change the default tree item content

itemToggle

readonly itemToggle: InputSignal<SlotContent<TreeSlotItemContext>>

Slot to change the default tree item toggle

navSelector

readonly navSelector: InputSignal<undefined | (node) => NodeListOf<HTMLElement>>

Retrieves expand items of the TreeItem

Param

HTML element that is representing the expand item

Default Value
(node: HTMLElement) => node.querySelectorAll('button')
nodes

readonly nodes: InputSignal<undefined | TreeItem[]>

Array of the tree nodes to display

Default Value

[]

structure

readonly structure: InputSignal<SlotContent<TreeContext>>

Slot to change the default display of the tree

Accessors
api
Get Signature

get api(): W["api"]

Retrieves the widget api

Returns

W["api"]

the widget api

directives
Get Signature

get directives(): W["directives"]

Retrieves the widget directives

Returns

W["directives"]

the widget directives

state
Get Signature

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

Returns

AngularState<W>

the widget state

TreeContext

type alias

TreeContext: WidgetSlotContext<TreeWidget>

Represents the context for a Tree widget. This interface is an alias for WidgetSlotContext<TreeWidget>.

treeDefaultItemToggle

constant

const treeDefaultItemToggle: SlotContent<TreeSlotItemContext>

A constant representing the default slot for tree item toggle.

treeDefaultSlotItem

constant

const treeDefaultSlotItem: SlotContent<TreeSlotItemContext>

A constant representing the default slot for tree item.

treeDefaultSlotItemContent

constant

const treeDefaultSlotItemContent: SlotContent<TreeSlotItemContext>

A constant representing the default slot for tree item.

treeDefaultSlotStructure

constant

const treeDefaultSlotStructure: SlotContent<TreeContext>

A constant representing the default slot for tree structure.

TreeDirectives

interface

Interface representing various directives used in the Tree component.

Properties
itemAttributesDirective

itemAttributesDirective: Directive<{ item: NormalizedTreeItem; }>

Directive to handle attributes for the tree item

itemToggleDirective

itemToggleDirective: Directive<{ item: NormalizedTreeItem; }>

Directive to handle toggle for the tree item

navigationDirective

navigationDirective: Directive

Directive to attach navManager for the tree

TreeItem

interface

Represents a tree item component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the node

children?

optional children: TreeItem[]

Optional array of children nodes

isExpanded?

optional isExpanded: boolean

If true the node is expanded

label

label: string

String title of the node

TreeItemContentDirective

class

Directive to provide a template reference for tree item content.

This directive uses a template reference to render the TreeSlotItemContext.

TreeItemDirective

class

Directive to provide a template reference for tree item.

This directive uses a template reference to render the TreeSlotItemContext.

TreeItemToggleDirective

class

Directive to provide a template reference for tree item toggle.

This directive uses a template reference to render the TreeSlotItemContext.

TreeProps

interface

Represents the properties for the Tree component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the tree if there is no explicit label

Default Value

''

ariaLabelToggleFn

ariaLabelToggleFn: (label) => string

Return the value for the 'aria-label' attribute of the toggle

Parameters
label

string

tree item label

Returns

string

Default Value
(label: string) => `Toggle ${label}`
className

className: string

CSS classes to be applied on the widget main container

Default Value

''

item

item: SlotContent<TreeSlotItemContext>

Slot to change the default tree item

itemContent

itemContent: SlotContent<TreeSlotItemContext>

Slot to change the default tree item content

itemToggle

itemToggle: SlotContent<TreeSlotItemContext>

Slot to change the default tree item toggle

nodes

nodes: TreeItem[]

Array of the tree nodes to display

Default Value

[]

onExpandToggle

onExpandToggle: (node) => void

An event emitted when the user toggles the expand of the TreeItem.

Event payload is equal to the TreeItem clicked.

Parameters
node

NormalizedTreeItem

Returns

void

Default Value
() => {}
structure

structure: SlotContent<TreeContext>

Slot to change the default display of the tree

Methods
navSelector

navSelector(node): NodeListOf<HTMLElement>

Retrieves expand items of the TreeItem

Parameters
node

HTMLElement

HTML element that is representing the expand item

Returns

NodeListOf<HTMLElement>

Default Value
(node: HTMLElement) => node.querySelectorAll('button')

TreeSlotItemContext

type alias

TreeSlotItemContext: TreeContext & object

Represents the context for a tree item, extending the base TreeContext with an additional item property.

Type declaration
item

item: NormalizedTreeItem

TreeState

interface

Represents the state of a Tree component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the tree if there is no explicit label

Default Value

''

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

expandedMap

expandedMap: object

Getter of expanded state for each tree node

get
Parameters

####### item

NormalizedTreeItem

Returns

undefined | boolean

item

item: SlotContent<TreeSlotItemContext>

Slot to change the default tree item

itemContent

itemContent: SlotContent<TreeSlotItemContext>

Slot to change the default tree item content

itemToggle

itemToggle: SlotContent<TreeSlotItemContext>

Slot to change the default tree item toggle

normalizedNodes

normalizedNodes: NormalizedTreeItem[]

Array of normalized tree nodes

structure

structure: SlotContent<TreeContext>

Slot to change the default display of the tree

TreeStructureDirective

class

Directive to provide a template reference for tree structure.

This directive uses a template reference to render the TreeContext.

TreeWidget

type alias

TreeWidget: Widget<TreeProps, TreeState, TreeApi, TreeDirectives>

Represents a Tree widget component.