Skip to content

SiHeaderDropdownItemsFactoryComponent documentation

selector
si-header-dropdown-items-factory

A factory to render multiple MenuItem . Requires a wrapping SiHeaderDropdownComponent .

Input Properties

NameTypeDefaultDescription
items
Required
MenuItem[]

Output Properties

NameTypeDescription
activeChange
boolean

Types Documentation

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"
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"
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"
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
Can be used to pass context-specific options to a header-dropdown that should / or cannot be provided by a consuming application.
Properties
If the inline navbar is already wrapped in a focus trap, set this property to prevent the header-dropdown from creating a focus trap.
disableRootFocusTrapForInlineMode: boolean
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.
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
Properties
Whether the dropdown should be opened inline.
inlineDropdown?: Observable<boolean>
The position of the dropdown if opened in an overlay.
overlayPosition?: ConnectedPosition[]
Methods
Called whenever a dropdown is close *
Parameters
trigger: SiHeaderDropdownTriggerDirective
Called whenever a dropdown is opened *
Parameters
trigger: SiHeaderDropdownTriggerDirective
Called whenever an item is triggered that is not opening another dropdown.
onDropdownItemTriggered: () => void
Translatable
import
Used in events emitted from SiLinkActionService
Properties
param: any
Wrapper component for SiHeaderDropdownItemComponent . Must only be opened using an SiHeaderDropdownTriggerDirective .
Constructor
() => {}
Properties
document: Document = ...
focusTrap: Signal<CdkTrapFocus> = ...
options: (null | HeaderDropdownOptions) = ...
previousElement: (null | Element) = null
trigger: SiHeaderDropdownTriggerDirective = ...
Accessors
get show: boolean
get submenu: boolean
get trapFocus: boolean
Methods
escape: () => void
Creates a dropdown-item. Must be used within an SiHeaderDropdownComponent .
Constructor
() => {}
Properties
Badge that is rendered after the label.
badge: InputSignal<(undefined | string | number)> = ...
Color of the badge (not iconBadge).
badgeColor: InputSignal<(undefined | string)> = ...
Whether the icon is checked with a radio or check mark.
checked: InputSignal<(undefined | "" | "check" | "radio")> = ...
Optional icon that will be rendered before the label.
icon: InputSignal<(undefined | string)> = ...
Badge (always red) that is attached to the icon.
iconBadge: InputSignal<(undefined | string | number)> = ...
navbar: (null | HeaderWithDropdowns) = ...
ownTrigger: (null | SiHeaderDropdownTriggerDirective) = ...
parentTrigger: SiHeaderDropdownTriggerDirective = ...
Methods
click: () => void
Trigger to open dropdowns in a navbar. A dropdown will always be attached to the view, even if not visible.

If a dropdown is opened in desktop mode, it will be reattached to an overlay while being opened.
Constructor
() => {}
Properties
_isOpen: boolean = false
ariaControls: string = ...
destroying: boolean = false
Template that be rendered inside the dropdown.
dropdown: InputSignal<TemplateRef<unknown>> = ...
dropdownClose: Subject<void> = ...
Data that should be passed as template context to the dropdown.
dropdownData: InputSignal<unknown> = ...
elementRef: ElementRef<HTMLElement> = ...
headerAnchorComponentRef?: ComponentRef<SiHeaderAnchorComponent>
id: string = ...
injector: DestroyableInjector = ...
level: number = ...
navbar: (null | HeaderWithDropdowns) = ...
Emits whenever a dropdown is opened or closed.
openChange: OutputEmitterRef<boolean> = ...
Child triggers will set themselves here if they are open.
openSubmenu?: SiHeaderDropdownTriggerDirective
overlay: Overlay = ...
overlayRef?: OverlayRef
parent: (null | SiHeaderDropdownTriggerDirective) = ...
portal?: TemplatePortal<unknown>
viewContainerRef: ViewContainerRef = ...
viewRef?: EmbeddedViewRef<unknown>
idCounter: number = 0
Accessors
Whether the dropdown is open.
get isOpen: boolean
get isOverlay: boolean
Methods
attachDropdownInline: () => void
attachDropdownOverlay: () => void
click: () => void
(options: { all: boolean }) => void
Closes the dropdown.
Parameters
options?: { all: boolean }
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.
ngOnChanges: () => void from OnChanges.ngOnChanges
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
Opens the dropdown.
open: () => void
Directive for trapping focus within a region.
Constructor
(args: unknown[]) => {}
Parameters
args: unknown[]
Properties
_captureFocus: any
_elementRef: any
_focusTrapFactory: any
Previously focused element to restore focus to upon destroy when using autoCapture.
_previouslyFocusedElement: any
Whether the directive should automatically move focus into the trapped region upon initialization and return focus to the previous activeElement upon destruction.
autoCapture: boolean
Underlying FocusTrap instance.
focusTrap: FocusTrap
ngAcceptInputType_autoCapture: unknown
ngAcceptInputType_enabled: unknown
Accessors
Whether the focus trap is active.
get enabled: boolean
set enabled: (value: boolean)
Methods
A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit
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
(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
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(undefined | readonly (MenuItem | MenuItem)[])> = ...
linkActionService: (null | SiLinkActionService) = ...
menuActionService: (null | SiMenuActionService) = ...
Methods
Parameters
item: (MenuItem | MenuItem)
Parameters
item: (MenuItem | MenuItem)
Parameters
item: MenuItem
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.