Skip to content

TreeItemContext Type documentation

{ index: number, parent: SiTreeViewComponent, treeItem: TreeItem }

Types Documentation

<T: any>
Defines the data for a tree item. All properties are optional.
Properties
Indicates if the item is active, the last clicked item is active always; only one item can be active.
active?: boolean
Defines the content of the optional badge. Should be a number or something like "100+". If undefined or empty string, no badge is displayed.
badge?: (string | number)
Defines the background color of the badge. Use the status color names as inputs.
See https://element.siemens.io/components/status-notifications/badges/
badgeColor?: string
The state of the checkbox/optionbox.
checked?: CheckboxState
The child tree items.
children?: TreeItem<T>[]
Any custom data that can be used in custom templates. Not shown by default.
customData?: T
The text shown for the tree item data field 1.
dataField1?: string
The text shown for the tree item data field 2.
dataField2?: string
The web font icon class name (e.g. element-building). The icon is shown on the left (in LTR) side of the label.
icon?: string
The text shown for the tree item label (header).
label?: string
The hierarchy level of the node. This will be auto-calculated by the tree view control.
level?: number
The parent tree item. This will be automatically set by the tree view control.
parent?: TreeItem<T>
Indicates if the tree item is selectable or not.
selectable?: boolean
If the item is selected (note that the tree view component supports single and multi-selection).
selected?: boolean
If the tree item shall show a checkbox.
showCheckbox?: boolean
If the tree item shall show an optionbox.
showOptionbox?: boolean
The folder state of the tree item.
state?: TreeItemFolderState
The color of the state pipe; formatted as CSS value ('red' or '#FF0000' or 'rgb(255, 0, 0)').
stateIndicatorColor?: string
The name of the template to apply.
templateName?: string
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
14 = 14
Variable
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
(item: TreeItem) => ((MenuItemLegacy | MenuItem)[] | Observable<(MenuItemLegacy | MenuItem)[]> | null)
Properties
headerArrow: string
headerHome: string
itemCollapsed: string
itemCollapsedFlat: string
itemCollapsedLeft: string
itemExpanded: string
itemExpandedFlat: string
itemExpandedLeft: string
itemMenu: string
Constructor
(treeItems: TreeItem<any>[], virtualized: boolean) => {}
Parameters
treeItems: TreeItem<any>[]
virtualized: boolean
Properties
treeItems: TreeItem<any>[]
virtualized: boolean
Constructor
(treeItem: TreeItem, callback: (treeItem: TreeItem, children: TreeItem<any>[]) => void) => {}
Parameters
treeItem: TreeItem
callback: (treeItem: TreeItem, children: TreeItem<any>[]) => void
Properties
callback: (treeItem: TreeItem, children: TreeItem<any>[]) => void
treeItem: TreeItem
Constructor
(target: TreeItem, oldState: CheckboxState, newState: CheckboxState) => {}
Parameters
target: TreeItem
oldState: CheckboxState
newState: CheckboxState
Properties
newState: CheckboxState
oldState: CheckboxState
target: TreeItem
Constructor
(treeItem: TreeItem, oldState: TreeItemFolderState, newState: TreeItemFolderState) => {}
Parameters
treeItem: TreeItem
oldState: TreeItemFolderState
newState: TreeItemFolderState
Properties
newState: TreeItemFolderState
oldState: TreeItemFolderState
treeItem: TreeItem
("unchecked" | "checked" | "indeterminate")
The check box state of a tree item.
("collapsed" | "expanding" | "expanded" | "leaf")
The folder state of a tree item.
Translatable
import
extends MenuItemBase
Properties
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: MenuItem[]
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "action"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the checkbox is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "checkbox"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the radio is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "radio"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
Properties
height: number
width: number
Properties
Badge that is rendered after the label.
badge?: (string | number)
Color of the badge (not iconBadge).
badgeColor?: string
Whether the menu item id disabled.
disabled?: boolean
Optional icon that will be rendered before the label.
icon?: string
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean)
ID that will be attached to the DOM node.
id?: string
Label that is shown to the user.
label: TranslatableString
Constructor
(target: TreeItem, mouseEvent: (KeyboardEvent | MouseEvent)) => {}
Parameters
target: TreeItem
mouseEvent: (KeyboardEvent | MouseEvent)
Properties
mouseEvent: (KeyboardEvent | MouseEvent)
target: TreeItem
(string | number)
Property
Badge that is rendered after the label.
string
Property
Color of the badge (not iconBadge).
boolean
Property
Whether the menu item id disabled.
string
Property
Optional icon that will be rendered before the label.
(string | number | boolean)
Property
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
string
Property
ID that will be attached to the DOM node.
TranslatableString
Property
Label that is shown to the user.
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
Used in events emitted from SiLinkActionService
Properties
param: any
implements OnInit, OnChanges, OnDestroy, AfterViewInit, AfterViewChecked
Implements a tree view with the following main capabilities:
Showing multiple trees. The data of the trees is set via the input property 'items'.
Showing the trees in a flat mode with navigation/bread/crumb on top.
A tree/list item is composed of a 'folder' icon, any item icon, the label, two additional datafields and a context menu button.
Children of parent nodes are lazy loaded upon request (in case they are not yet available in model.)
Context menu support via context menu item: the context menu items can be set via input properties.
Multi selection and focus support.
Checkboxes and / or option boxes per tree node.
Virtualization support: Input properties allow to set the page size and the number of pages to be virtualized.
Current limitation is roughly half a million of nodes. This is due to some 'strange' behavior with flex containers.
Set the input properties 'pageSize' and 'pagesVirtualized' to a reasonable amount of virtualized items.
The number of virtualized items is the product of the pageSize and the pagesVirtualized (no of pages virtualized).
Choose a value in the area of 50 virtualized items, dependent on the screen size. Check at runtime if appropriate!
Grouped List support: The component does also support grouped lists.
See the test client implementation of this package for all functionality.
Constructor
() => {}
Properties
_items: WritableSignal<TreeItem<any>[]> = ...
_multiSelectionActive: boolean = false
Aria label for the tree view. Needed for a11y, alternatively use ariaLabelledBy .
ariaLabel: InputSignal<(undefined | TranslatableString)> = ...
Aria labelled by for the tree view. Needed for a11y, alternatively use ariaLabel .
ariaLabelledBy: InputSignal<(undefined | string)> = ...
breadCrumbTreeItems: TreeItem<any>[] = []
cdRef: ChangeDetectorRef = ...
children: Signal<readonly SiTreeViewItemComponent[]> = ...
The indentation in pixel for the children in respect to its parent.
childrenIndentation: InputSignal<number> = DEFAULT_CHILDREN_INDENTATION
childrenLoaded: Subject<TreeItem<any>> = ...
Tooltip text shown for the collapse all icon.
collapseAllTooltip: InputSignal<TranslatableString> = $localize`:@@SI_TREE_VIEW.COLLAPSE_ALL:Collapse all`
Enable the compact mode, making it more vertically compact.
compactMode: InputSignalWithTransform<boolean, unknown> = false
computedIcons: Signal<{ headerArrow: string, headerHome: string, itemCollapsed: string, itemCollapsedFlat: string, itemCollapsedLeft: string, itemExpanded: string, itemExpandedFlat: string, itemExpandedLeft: string, itemMenu: string }> = ...
The context menu items which are bound to the context menu of all tree items, or a menu item provider function that is invoked for each tree item once.
contextMenuItems: InputSignal<((MenuItem | MenuItem)[] | MenuItemsProvider)> = []
Sets if children are deleted upon collapsing tree items. This feature might be used, if children shall be lazy loaded always upon expanding a tree item.
deleteChildrenOnCollapse: InputSignalWithTransform<boolean, unknown> = false
Whether "filled" icons should not be used when a tree item is selected. Per default filled icons are used when available.
disableFilledIcons: InputSignalWithTransform<boolean, unknown> = false
domChangeObserver?: MutationObserver
element: ElementRef<any> = ...
Sets if the tree items shall show a checkbox.
enableCheckbox: InputSignalWithTransform<boolean, unknown> = false
Shows or hides context menu button and also controls context menu visibility on right click.
enableContextMenuButton: InputSignalWithTransform<boolean, unknown> = true
Shows or hides additional information below the label.
enableDataField1: InputSignalWithTransform<boolean, unknown> = false
Shows or hides additional information below the label.
enableDataField2: InputSignalWithTransform<boolean, unknown> = false
Shows or hides icon
enableIcon: InputSignalWithTransform<boolean, unknown> = true
Sets if the tree items shall show an optionbox.
enableOptionbox: InputSignalWithTransform<boolean, unknown> = false
Allows / disabled selecting of tree items by clicking on them.
enableSelection: InputSignalWithTransform<boolean, unknown> = false
Shows or hides state pipe.
enableStateIndicator: InputSignalWithTransform<boolean, unknown> = true
Used internally by SiTreeViewItemDirective to determine if the items have changed, and render the new items.
evaluateForTreeItemsDiffer: Subject<void> = ...
Tooltip text shown for the expand all icon.
expandAllTooltip: InputSignal<TranslatableString> = $localize`:@@SI_TREE_VIEW.EXPAND_ALL:Expand all`
Enable buttons for collapse and expand all. Does not work when flatTree is enabled.
expandCollapseAll: InputSignalWithTransform<boolean, unknown> = false
Sets if the tree items should expand/collapse when clicking on them. Does not work when flatTree is enabled or the tree item is not selectable.
expandOnClick: InputSignalWithTransform<boolean, unknown> = false
Sets if the tree view shall be displayed as flat tree list with a breadcrumb. A flat tree only shows the one level at the time and lists the tree items of the current level as a list.
flatTree: InputSignal<boolean> = false
Sets if the folder state icon shall be shown on the left (in LTR) or on the right (in LTR) side of the tree item. Per default the icon will be shown on the left (in LTR). Has no effect if flatTree is enabled.
folderStateStart: InputSignalWithTransform<boolean, unknown> = true
Sets if the tree view is displayed as a grouped list. Important: In this mode, only the first two hierarchies of the tree model are considered!
groupedList: InputSignalWithTransform<boolean, unknown> = false
hasAnyChildren: boolean = true
Enable horizontal scrolling. When disabled (the default), an ellipsis is used for overflowing text
horizontalScrolling: InputSignalWithTransform<boolean, unknown> = false
Customize icons for treeview.
icons: InputSignal<(undefined | TreeViewIconSet)> = ...
Sets if the checkbox state of a tree item is inherited to its children/parent.
inheritChecked: InputSignalWithTransform<boolean, unknown> = true
initialized: boolean = false
injector: Injector = ...
Sets if the tree list shall virtualize the tree items. This input field must be set at startup and shall not be changed afterwards.
isVirtualized: InputSignalWithTransform<boolean, unknown> = true
Sets the root tree items of all the trees (Required).
items: InputSignal<TreeItem<any>[]> = ...
Triggered upon virtualization (or unvirtualization) of a tree item.
itemsVirtualizedChanged: OutputEmitterRef<ItemsVirtualizedArgs> = ...
keyManager: FocusKeyManager<SiTreeViewItemComponent>
latestFolderChanged?: TreeItem<any>
Triggered upon the request of loading the children of a tree item.
loadChildren: OutputEmitterRef<LoadChildrenEventArgs> = ...
manuallySelectedTreeItems: boolean = false
multiSelectionStart: TreeItem
nextItmes: Signal<readonly SiTreeViewItemComponent[]> = ...
String to be shown when there are no content actions.
noActionsString: InputSignal<string> = 'No actions available'
Number of rows per page. Used for the virtualization of rows (number of rows per page).
pageSize: InputSignalWithTransform<number, number> = 10
Number of pages which are virtualized.
pagesVirtualized: InputSignalWithTransform<number, number> = 6
resizeObserver: ResizeObserverService = ...
scroll$: Observable<Event>
scrollChildIntoView: Subject<TreeItem<any>> = ...
Sets the tree item to be selected.
selectedItem: InputSignal<(undefined | TreeItem<any> | TreeItem<any>[])> = ...
selectedTreeItems: TreeItem<any>[] = []
Sets if the tree shall force single tree item selection.
singleSelectMode: InputSignalWithTransform<boolean, unknown> = false
siTreeViewConverterService: SiTreeViewConverterService = ...
siTreeViewItemHeightService: SiTreeViewItemHeightService = ...
siTreeViewService: SiTreeViewService = ...
siTreeViewVirtualizationService: SiTreeViewVirtualizationService = ...
subscriptions: Subscription[] = []
The injected content with included SiTreeViewItemTemplateDirective.
templates: Signal<readonly SiTreeViewItemTemplateDirective[]> = ...
Track-by function for tree items. By default, items are tracked by their identity.
Deprecated: has no effect and will be removed
trackByFunction: InputSignal<TrackByFunction<TreeItem<any>>> = buildTrackByIdentity<​TreeItem​>()
Triggered upon clicking the checkbox of a tree item.
treeItemCheckboxClicked: OutputEmitterRef<CheckboxClickEventArgs> = ...
Triggered upon clicking the label of a tree item.
treeItemClicked: OutputEmitterRef<TreeItem<any>> = ...
treeItemContentTemplate: Signal<(undefined | TemplateRef<any>)> = ...
Triggered upon clicking the folder of a tree item.
treeItemFolderClicked: OutputEmitterRef<FolderStateEventArgs> = ...
Triggered upon a state change of the folder of a tree item.
treeItemFolderStateChanged: OutputEmitterRef<FolderStateEventArgs> = ...
Triggered upon the selection of a tree item (multi selection supported).
treeItemsSelected: OutputEmitterRef<TreeItem<any>[]> = ...
treeViewInnerElement: Signal<ElementRef<HTMLDivElement>> = ...
updateGroupItemHeightRequired: boolean = true
updateTreeItemHeightRequired: boolean = true
Create a virtual root node so there is just a single root node. This makes sure the tree can be fully traversed starting from any node. This is needed e.g. for recursively removing the "active" state from other nodes.
virtualRoot: TreeItem = ...
Accessors
Returns index of the currently active Tree Item element in DOM or null if there is no active tree item element
get activeIndex: (null | number)
Can be used for [cdkDropListData] when using cdk drag and drop.
get dropListItems: TreeItem<any>[]
Returns true if the header shows the root/home of the tree.
get headerShowsRoot: boolean
Gets the height of the div below the virtualized rows.
get heightAfter: string
Gets the height of the div above the virtualized rows.
get heightBefore: string
This is meant to be used for internal purpose. Returns the virtualized items in the tree list uses virtualization, otherwise all items are returned as a flat list. Bind these to the HTML.
get itemsVirtualized: TreeItem<any>[]
Returns the last breadcrumb tree item. Can be null in case the flat tree shows the root.
get lastBreadCrumbItem: (null | TreeItem<any>)
Methods
(children: TreeItem<any>[], parent: TreeItem<any>, position: number) => void
Add tree items as root elements or as children of an existing tree item.
Parameters
Tree items to add.
children: TreeItem<any>[]
Optional parent tree item to which the items shall be added.
parent?: TreeItem<any>
Optional position where to insert the tree items among their siblings.
position?: number
Track class changes since adding classes like .tree-sm or .tree-xs change the item height. Changes have to trigger the SiTreeViewItemHeightService otherwise the virtualized items are calculated incorrectly which cause rendering issues.
addClassObserver: () => void
(item: TreeItem, children: TreeItem<any>[]) => void
Called by the owner of the tree upon returning the retrieved children of a 'load children' request.
Parameters
item: TreeItem
children: TreeItem<any>[]
(treeItem: (undefined | TreeItem<any> | TreeItem<any>[])) => (undefined | TreeItem<any> | TreeItem<any>[])
Make sure to always have a single item for single selection or if there is only one item in the array.
Parameters
treeItem: (undefined | TreeItem<any> | TreeItem<any>[])
(items: TreeItem<any>[]) => void
Collapses all tree items.
Parameters
Optional param for recursion, will collapse these items. If empty, all tree items will be collapsed.
items?: TreeItem<any>[]
(items: TreeItem<any>[], flatModeOnly: boolean = false) => void
Parameters
items: TreeItem<any>[]
flatModeOnly: boolean = false
(items: TreeItem<any>[]) => void
Parameters
items: TreeItem<any>[]
(item: TreeItem) => void
Collapses the provided tree item.
Parameters
The tree item to be collapsed.
item: TreeItem
(item: TreeItem, collapseOtherNodes: boolean = true) => void
Parameters
item: TreeItem
collapseOtherNodes: boolean = true
emitSelectedItems: () => void
evalListItemsForFlatTreeMode: () => TreeItem<any>[]
evalLowestBreadCrumbNode: () => (undefined | TreeItem<any>)
(items: TreeItem<any>[]) => void
Expands all tree items.
Parameters
Optional param for recursion, will expand these items. If empty, all tree items will be expanded.
items?: TreeItem<any>[]
(item: TreeItem) => void
Expands the provided tree item.
Parameters
The tree item to be expanded.
item: TreeItem
(items: TreeItem<any>[], resetVirtualization: boolean = false) => void
Parameters
items: TreeItem<any>[]
resetVirtualization: boolean = false
(item: TreeItem) => void
Parameters
item: TreeItem
focusFirstItemFlattened: () => void
(item: TreeItem) => void
Parameters
item: TreeItem
(item: TreeItem) => void
Parameters
item: TreeItem
getChildren: () => Signal<readonly SiTreeViewItemComponent[]>
(event: KeyboardEvent) => void
Parameters
event: KeyboardEvent
handleTreeMode: () => void
Create an observable to track visible dimensions and item height of the tree view. It's necessary to dynamically increase the pageSize to render the correct amount of visible tree items.
Returns observable with the current tree dimensions.
monitorTreeSizeChanges: () => Observable<ElementDimensions>
A callback method that is invoked immediately after the default change detector has completed one change-check cycle for a component's view.
ngAfterViewChecked: () => void from AfterViewChecked.ngAfterViewChecked
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
(treeItem: TreeItem<any>) => void
Parameters
treeItem?: TreeItem<any>
onFlatTreeNavigateHome: () => void
onFlatTreeNavigateUp: () => void
(eventArgs: CheckboxClickEventArgs) => void
Parameters
eventArgs: CheckboxClickEventArgs
(event: ClickEventArgs) => void
Parameters
event: ClickEventArgs
(eventArgs: FolderStateEventArgs) => void
Parameters
eventArgs: FolderStateEventArgs
onKeyUpCtrl: () => void
onKeyUpMeta: () => void
onKeyUpShift: () => void
(treeItem: TreeItem) => void
Parameters
treeItem: TreeItem
onMouseLeave: () => void
(event: Event) => void
Parameters
event: Event
(elementTreeItem: ElementRef) => void
Parameters
elementTreeItem: ElementRef
(treeItem: (undefined | TreeItem<any>)) => void
Called by the consumer when he wants a node to be scrolled into view.
Parameters
treeItem: (undefined | TreeItem<any>)
(treeItem: TreeItem) => void
Parameters
treeItem: TreeItem
Forces a refresh of the view considering the current tree item model. Needs to be called when tree items have been added, removed, or updated via model in ways that do not trigger an automatic update of the view.
refresh: () => void
resetVirtualizedItemList: () => void
(treeItem: TreeItem) => void
Scrolls the specified tree item into view. Tree items will be expanded if required.
Parameters
treeItem: TreeItem
(treeItem: (undefined | TreeItem<any> | TreeItem<any>[])) => void
Parameters
treeItem: (undefined | TreeItem<any> | TreeItem<any>[])
(treeItem: TreeItem<any>) => void
Parameters
treeItem?: TreeItem<any>
(item: TreeItem) => void
Updates the tree to visualize the provided tree item by expanding all its parent items, collapsing all other first level tree items and scroll to the provided item.
Parameters
The tree item that shall be visible.
item: TreeItem
treeItemsUpdated: () => void
(treeItem: TreeItem<any>) => void
Parameters
treeItem?: TreeItem<any>
updateHasChildren: () => void
(dimension: ElementDimensions) => void
Dynamically calculate and update the virtual pageSize to render the correct amount of tree items.
Parameters
current tree dimensions.
dimension: ElementDimensions
(item: TreeItem) => void
Parameters
item: TreeItem
updateVirtualizedItemList: () => void
implements OnInit, OnDestroy, AfterViewInit, FocusableOption, DoCheck
Constructor
() => {}
Properties
_contextMenuItems: InputSignal<((MenuItem | MenuItem)[] | MenuItemsProvider)> = ...
ariaPosinset?: number
cdRef: ChangeDetectorRef = ...
childrenLoaded: Subject<TreeItem<any>> = ...
contextMenuItems: WritableSignal<(null | (MenuItem | MenuItem)[])> = ...
deleteChildrenOnCollapse: InputSignalWithTransform<boolean, unknown> = ...
displayFolderState: boolean = ...
element: ElementRef<any> = ...
enableContextMenuButton: InputSignalWithTransform<boolean, unknown> = ...
enableDataField1: InputSignalWithTransform<boolean, unknown> = ...
enableDataField2: InputSignalWithTransform<boolean, unknown> = ...
enableSelection: InputSignalWithTransform<boolean, unknown> = ...
icons: Signal<{ headerArrow: string, headerHome: string, itemCollapsed: string, itemCollapsedFlat: string, itemCollapsedLeft: string, itemExpanded: string, itemExpandedFlat: string, itemExpandedLeft: string, itemMenu: string }> = ...
indentLevel: number = ...
isContextMenuButtonVisible: Signal<boolean> = ...
menuTrigger: Signal<(undefined | CdkMenuTrigger)> = ...
nextSiblingElement: HTMLElement
savedElement: (undefined | ElementRef<any>)
scrollIntoView: Subject<TreeItem<any>> = ...
showIcon: Signal<boolean> = ...
showStateIndicator: InputSignalWithTransform<boolean, unknown> = ...
siTreeViewService: SiTreeViewService = ...
stickyEndItems: InputSignalWithTransform<boolean, unknown> = ...
subscriptions: Subscription[] = []
templates: Signal<readonly SiTreeViewItemTemplateDirective[]> = ...
treeItem: TreeItem = ...
treeItemContext: { parent: SiTreeViewComponent, record: IterableChangeRecord<TreeItem<any>> } = ...
treeViewComponent: SiTreeViewComponent = ...
Accessors
get ariaChecked: (null | boolean)
get ariaExpanded: (null | boolean)
get ariaLevel: number
get ariaSelected: (null | boolean)
get ariaSetsize: number
get biggerPaddingStart: string
get isExpanding: boolean
get isGroupedItem: boolean
get paddingStart: string
get showCheckOrOptionBox: boolean
get showFolderStateEnd: boolean
get showFolderStateStart: boolean
Methods
(item: TreeItem) => void
Parameters
item: TreeItem
expandOnClick: () => boolean
Focusses the tree item.
focus: () => void from FocusableOption.focus
Show icon if the item is selected. Per default the filled icon is used, this can be configured using disableFilledIcons .
getIconClass: () => string
getInputType: () => string
getItemFolderStateClass: () => string
Get tree item label.
getLabel: () => string from FocusableOption.getLabel
getStateIndicatorColor: () => string
(event: Event) => void
Parameters
event: Event
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit
A callback method that performs change-detection, invoked after the default change-detector runs. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.
ngDoCheck: () => void from DoCheck.ngDoCheck
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
onBoxClicked: () => void
(event: Event) => boolean
Parameters
event: Event
(event: Event) => void
Parameters
event: Event
(newState: string) => void
Parameters
newState?: string
(event: KeyboardEvent) => void
Parameters
event: KeyboardEvent
(event: MouseEvent) => void
Parameters
event: MouseEvent
(item: TreeItem) => void
Called by the consumer when they want a node to be scrolled into view.
Parameters
item: TreeItem
onToggleContextMenuClose: () => void
onToggleContextMenuOpen: () => void
(treeItem: TreeItem) => TemplateRef<any>
Parameters
treeItem: TreeItem
scrollChildNodeIntoViewPort: () => void
updateContextMenuItem: () => void
A service wrapping ResizeObserver . This is a service for those reasons: - only one ResizeObserver should be used for performance reason. - For Angular change detection to work, explicit ngZone calls are necessary - Observable stream
Constructor
() => {}
Properties
listeners: Map<Element, Listener> = ...
resizeObserver?: ResizeObserver
timerQueue: Map<number, QueueEntry[]> = ...
zone: NgZone = ...
Methods
check size on all observed elements. Only use in testing!
_checkAll: () => void
(element: Element, entry: ResizeSubscriber, force: boolean = false) => void
Parameters
element: Element
entry: ResizeSubscriber
force: boolean = false
(element: Element) => void
Parameters
element: Element
(element: Element, entry: ResizeSubscriber) => void
Parameters
element: Element
entry: ResizeSubscriber
(element: Element, throttle: number, emitInitial: boolean, emitImmediate: boolean) => Observable<ElementDimensions>
Observe the size of an element. Returns an observable with the changes.
Parameters
The element to observe
element: Element
Throttle time in ms. Will emit this time after the resize
throttle: number
Emit the initial size after subscribe?
emitInitial?: boolean
Emit an event immediately after the size changes. Useful e.g. for visibility checks.
emitImmediate?: boolean
(queue: QueueEntry[]) => void
Parameters
queue: QueueEntry[]
(timeout: number, element: Element, subscriber: ResizeSubscriber, unblock: boolean, force: boolean = false) => void
Parameters
timeout: number
element: Element
subscriber: ResizeSubscriber
unblock: boolean
force: boolean = false
(entry: Listener, subscriber: ResizeSubscriber, emitInitial: boolean) => void
Parameters
entry: Listener
subscriber: ResizeSubscriber
emitInitial?: boolean
(entry: Listener, subscriber: ResizeSubscriber) => void
Parameters
entry: Listener
subscriber: ResizeSubscriber
(entry: ResizeSubscriber) => void
Parameters
entry: ResizeSubscriber
Constructor
() => {}
Properties
name: InputSignal<(undefined | string)> = undefined
template: TemplateRef<any> = ...
Methods
(dir: SiTreeViewItemTemplateDirective, ctx: any) => ctx is { $implicit: TreeItem }
Parameters
dir: SiTreeViewItemTemplateDirective
ctx: any
extends CdkMenuTriggerBase implements OnChanges, OnDestroy
A directive that turns its host element into a trigger for a popup menu.
It can be combined with cdkMenuItem to create sub-menus. If the element is in a top level
MenuBar it will open the menu on click, or if a sibling is already opened it will open on hover.
If it is inside of a Menu it will open the attached Submenu on hover regardless of its sibling
state.
Constructor
() => {}
Properties
_changeDetectorRef: any
_cleanupMouseenter: any
Close out any sibling menu trigger menus.
_closeSiblingTriggers: any
_directionality: any
_elementRef: any
Get the configuration object used to create the overlay.
_getOverlayConfig: any
Get the preferred positions for the opened menu relative to the menu item.
_getOverlayPositions: any
Build the position strategy for the overlay which specifies where to place the menu.
_getOverlayPositionStrategy: any
_injector: any
_inputModalityDetector: any
The menu aim service used by this menu.
_menuAim: any
The app's menu tracking registry
_menuTracker: any
_ngZone: any
The parent menu this trigger belongs to.
_parentMenu: any
Subscribe to the MenuStack close events if this is a standalone trigger and close out the menu this triggers when requested.
_registerCloseHandler: any
_renderer: any
Sets the role attribute for this trigger if needed.
_setRole: any
Sets thte type attribute of the trigger.
_setType: any
Subscribe to the MenuStack closed events.
_subscribeToMenuStackClosed: any
Subscribe to the MenuStack hasFocus events.
_subscribeToMenuStackHasFocus: any
Subscribe to the mouseenter events and close any sibling menu items if this element is moused into.
_subscribeToMouseEnter: any
Subscribe to the overlays outside pointer events stream and handle closing out the stack if a click occurs outside the menus.
_subscribeToOutsideClicks: any
The child menu opened by this trigger.
childMenu?: Menu from CdkMenuTriggerBase.childMenu
Emits when the attached menu is requested to close
closed: EventEmitter<void> from CdkMenuTriggerBase.closed
Emits when this trigger is destroyed.
destroyed: Subject<void> from CdkMenuTriggerBase.destroyed
The DI injector for this component.
injector: Injector from CdkMenuTriggerBase.injector
Context data to be passed along to the menu template
menuData: unknown from CdkMenuTriggerBase.menuData
A list of preferred menu positions to be used when constructing the FlexibleConnectedPositionStrategy for this trigger's menu.
menuPosition: ConnectedPosition[] from CdkMenuTriggerBase.menuPosition
Function used to configure the scroll strategy for the menu.
menuScrollStrategy: () => ScrollStrategy from CdkMenuTriggerBase.menuScrollStrategy
The menu stack in which this menu resides.
menuStack: MenuStack from CdkMenuTriggerBase.menuStack
Template reference variable to the menu this trigger opens
menuTemplateRef: (null | TemplateRef<unknown>) from CdkMenuTriggerBase.menuTemplateRef
Emits when the attached menu is requested to open
opened: EventEmitter<void> from CdkMenuTriggerBase.opened
A reference to the overlay which manages the triggered menu
overlayRef: (null | OverlayRef) from CdkMenuTriggerBase.overlayRef
Emits when the outside pointer events listener on the overlay should be stopped.
stopOutsideClicksListener: Observable<void> from CdkMenuTriggerBase.stopOutsideClicksListener
The view container ref for this component
viewContainerRef: ViewContainerRef from CdkMenuTriggerBase.viewContainerRef
Methods
Handles clicks on the menu trigger.
_handleClick: () => void
(hasFocus: boolean) => void
Sets whether the trigger's menu stack has focus.
Parameters
Whether the menu stack has focus.
hasFocus: boolean
(event: KeyboardEvent) => void
Handles keyboard events for the menu item.
Parameters
The keyboard event to handle
event: KeyboardEvent
Close the opened menu.
close: () => void
Get a reference to the rendered Menu if the Menu is open and rendered in the DOM.
getMenu: () => (undefined | Menu)
Get the portal to be attached to the overlay which contains the menu. Allows for the menu content to change dynamically and be reflected in the application.
getMenuContentPortal: () => TemplatePortal<any> from CdkMenuTriggerBase.getMenuContentPortal
(element: Element) => boolean from CdkMenuTriggerBase.isElementInsideMenuStack
Whether the given element is inside the scope of this trigger's menu stack.
Returns Whether the element is inside the scope of this trigger's menu stack.
Parameters
The element to check.
element: Element
Whether the attached menu is open.
isOpen: () => boolean from CdkMenuTriggerBase.isOpen
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
Open the attached menu.
open: () => void
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(undefined | readonly (MenuItem | MenuItem)[])> = ...
linkActionService: (null | SiLinkActionService) = ...
menuActionService: (null | SiMenuActionService) = ...
Methods
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: MenuItem) => void
Parameters
item: MenuItem
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
Constructor
() => {}
Properties
Observable which emits the link and param to run the action on.
action$: Observable<LinkAction> = this.actionSubject.asObservable()
actionSubject: Subject<LinkAction> = ...
Methods
(link: Link, param: any) => void
Emit a new link and param pair to run the action on.
Parameters
param: any

Except where otherwise noted, content on this site is licensed under MIT License.