Skip to content

SiTreeViewComponent documentation

selector
si-tree-view

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.

Input Properties

NameTypeDefaultDescription
ariaLabel
TranslatableStringAria label for the tree view. Needed for a11y, alternatively use ariaLabelledBy .
ariaLabelledBy
stringAria labelled by for the tree view. Needed for a11y, alternatively use ariaLabel .
childrenIndentation
numberDEFAULT_CHILDREN_INDENTATIONThe indentation in pixel for the children in respect to its parent.
collapseAllTooltip
TranslatableString$localize`:@@SI_TREE_VIEW.COLLAPSE_ALL:Collapse all`Tooltip text shown for the collapse all icon.
compactMode
booleanfalseEnable the compact mode, making it more vertically compact.
contextMenuItems
((MenuItem | MenuItem)[] | MenuItemsProvider)[]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.
deleteChildrenOnCollapse
booleanfalseSets 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.
disableFilledIcons
booleanfalseWhether "filled" icons should not be used when a tree item is selected. Per default filled icons are used when available.
enableCheckbox
booleanfalseSets if the tree items shall show a checkbox.
enableContextMenuButton
booleantrueShows or hides context menu button and also controls context menu visibility on right click.
enableDataField1
booleanfalseShows or hides additional information below the label.
enableDataField2
booleanfalseShows or hides additional information below the label.
enableIcon
booleantrueShows or hides icon
enableOptionbox
booleanfalseSets if the tree items shall show an optionbox.
enableSelection
booleanfalseAllows / disabled selecting of tree items by clicking on them.
enableStateIndicator
booleantrueShows or hides state pipe.
expandAllTooltip
TranslatableString$localize`:@@SI_TREE_VIEW.EXPAND_ALL:Expand all`Tooltip text shown for the expand all icon.
expandCollapseAll
booleanfalseEnable buttons for collapse and expand all. Does not work when flatTree is enabled.
expandOnClick
booleanfalseSets 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.
flatTree
booleanfalseSets 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.
folderStateStart
booleantrueSets 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.
groupedList
booleanfalseSets 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!
horizontalScrolling
booleanfalseEnable horizontal scrolling. When disabled (the default), an ellipsis is used for overflowing text
icons
TreeViewIconSetCustomize icons for treeview.
inheritChecked
booleantrueSets if the checkbox state of a tree item is inherited to its children/parent.
isVirtualized
booleantrueSets if the tree list shall virtualize the tree items. This input field must be set at startup and shall not be changed afterwards.
items
TreeItem<any>[]...Sets the root tree items of all the trees (Required).
noActionsString
string'No actions available'String to be shown when there are no content actions.
pageSize
number10Number of rows per page. Used for the virtualization of rows (number of rows per page).
pagesVirtualized
number6Number of pages which are virtualized.
selectedItem
(TreeItem<any> | TreeItem<any>[])Sets the tree item to be selected.
singleSelectMode
booleanfalseSets if the tree shall force single tree item selection.
trackByFunction
Deprecated		TrackByFunction<TreeItem<any>>buildTrackByIdentity<​TreeItem​>()Track-by function for tree items. By default, items are tracked by their identity.
Deprecated: has no effect and will be removed

Output Properties

NameTypeDescription
itemsVirtualizedChanged
ItemsVirtualizedArgsTriggered upon virtualization (or unvirtualization) of a tree item.
loadChildren
LoadChildrenEventArgsTriggered upon the request of loading the children of a tree item.
treeItemCheckboxClicked
CheckboxClickEventArgsTriggered upon clicking the checkbox of a tree item.
treeItemClicked
TreeItem<any>Triggered upon clicking the label of a tree item.
treeItemFolderClicked
FolderStateEventArgsTriggered upon clicking the folder of a tree item.
treeItemFolderStateChanged
FolderStateEventArgsTriggered upon a state change of the folder of a tree item.
treeItemsSelected
TreeItem<any>[]Triggered upon the selection of a tree item (multi selection supported).

Attributes and Methods

NameTypeDefaultDescription
addChildItems(...)
(children: TreeItem<any>[], parent: TreeItem<any>, position: number) => voidAdd tree items as root elements or as children of an existing tree item.

Parameters
  • children: TreeItem<any>[]  Tree items to add.
  • parent: TreeItem<any>  Optional parent tree item to which the items shall be added.
  • position: number  Optional position where to insert the tree items among their siblings.
collapseAll(...)
(items: TreeItem<any>[]) => voidCollapses all tree items.

Parameters
  • items: TreeItem<any>[]  Optional param for recursion, will collapse these items. If empty, all tree items will be collapsed.
collapseTreeItem(...)
(item: TreeItem) => voidCollapses the provided tree item.

Parameters
  • item: TreeItem  The tree item to be collapsed.
(readonly) dropListItems
TreeItem<any>[]Can be used for [cdkDropListData] when using cdk drag and drop.
expandAll(...)
(items: TreeItem<any>[]) => voidExpands all tree items.

Parameters
  • items: TreeItem<any>[]  Optional param for recursion, will expand these items. If empty, all tree items will be expanded.
expandTreeItem(...)
(item: TreeItem) => voidExpands the provided tree item.

Parameters
  • item: TreeItem  The tree item to be expanded.
refresh()
() => voidForces 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.
scrollItemIntoView(...)
(treeItem: TreeItem) => voidScrolls the specified tree item into view. Tree items will be expanded if required.

Parameters
showTreeItem(...)
(item: TreeItem) => voidUpdates 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
  • item: TreeItem  The tree item that shall be visible.
(readonly) templates
Signal<readonly SiTreeViewItemTemplateDirective[]>...The injected content with included SiTreeViewItemTemplateDirective.

Types Documentation

(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
<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
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
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
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
("unchecked" | "checked" | "indeterminate")
The check box state of a tree item.
("collapsed" | "expanding" | "expanded" | "leaf")
The folder state of a tree item.
Properties
height: number
width: number
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
Constructor
(target: TreeItem, mouseEvent: (KeyboardEvent | MouseEvent)) => {}
Parameters
target: TreeItem
mouseEvent: (KeyboardEvent | MouseEvent)
Properties
mouseEvent: (KeyboardEvent | MouseEvent)
target: TreeItem
Used in events emitted from SiLinkActionService
Properties
param: any
Constructor
() => {}
Properties
name: InputSignal<(undefined | string)> = undefined
template: TemplateRef<any> = ...
Methods
(dir: SiTreeViewItemTemplateDirective, ctx: any) => ctx is { $implicit: TreeItem }
Parameters
dir: SiTreeViewItemTemplateDirective
ctx: any
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
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.