Skip to content

SiHeaderDropdownItemComponent documentation

selector
si-header-dropdown-item, a[si-header-dropdown-item], button[si-header-dropdown-item]

Creates a dropdown-item. Must be used within an SiHeaderDropdownComponent .

Input Properties

NameTypeDefaultDescription
badge
(string | number)Badge that is rendered after the label.
badgeColor
stringColor of the badge (not iconBadge).
checked
("" | "check" | "radio")Whether the icon is checked with a radio or check mark.
icon
stringOptional icon that will be rendered before the label.
iconBadge
(string | number)Badge (always red) that is attached to the icon.

Types Documentation

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
Properties
Whether the dropdown should be opened inline.
inlineDropdown?: Observable<boolean>
The position of the dropdown if opened in an overlay.
overlayPosition?: ConnectedPosition[]
Methods
(trigger: SiHeaderDropdownTriggerDirective) => void
Called whenever a dropdown is close *
Parameters
trigger: SiHeaderDropdownTriggerDirective
(trigger: SiHeaderDropdownTriggerDirective) => void
Called whenever a dropdown is opened *
Parameters
trigger: SiHeaderDropdownTriggerDirective
Called whenever an item is triggered that is not opening another dropdown.
onDropdownItemTriggered: () => void
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
implements OnChanges, OnInit, OnDestroy
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
implements OnDestroy, AfterContentInit, OnChanges, DoCheck
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

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