SiHeaderActionItemComponent documentation¶

selector

button[si-header-action-item], a[si-header-action-item]

Adds an action item to the header. Should be located inside .header-actions .

Input Properties¶

Name	Type	Default	Description
badge ¶	(`number` \| `boolean` \| `null`)		Adds a badge to the header item. If type - =number, the number will be shown and automatically trimmed if \>99 - =true, an empty red dot will be shown
icon ¶	`string`		The icon to be shown.

Attributes and Methods¶

Name	Type	Default	Description
ngOnChanges(...) ¶	(changes: { badge: `SimpleChange`<(`number` \| `boolean` \| `null` \| `undefined`)>, dropdownTrigger: `SimpleChange`<(`SiHeaderDropdownTriggerDirective` \| `null`)>, icon: `SimpleChange`<`string`>, ngOnChanges: `SimpleChange`<(changes: `{ readonly icon?: SimpleChange<string> \\| undefined; readonly badge?: SimpleChange<number \\| boolean \\| null \\| undefined> \\| undefined; ngOnChanges?: SimpleChange<...> \\| undefined; readonly dropdownTrigger?: SimpleChange<...> \\| undefined; ngOnInit?: SimpleChange<...> \\| undefined; }`) => `void`>, ngOnInit: `SimpleChange`<() => `void`> }) => `void`		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 changes: { badge: `SimpleChange`<(`number` \| `boolean` \| `null` \| `undefined`)>, dropdownTrigger: `SimpleChange`<(`SiHeaderDropdownTriggerDirective` \| `null`)>, icon: `SimpleChange`<`string`>, ngOnChanges: `SimpleChange`<(changes: `{ readonly icon?: SimpleChange<string> \\| undefined; readonly badge?: SimpleChange<number \\| boolean \\| null \\| undefined> \\| undefined; ngOnChanges?: SimpleChange<...> \\| undefined; readonly dropdownTrigger?: SimpleChange<...> \\| undefined; ngOnInit?: SimpleChange<...> \\| undefined; }`) => `void`>, ngOnInit: `SimpleChange`<() => `void`> } The changed properties.
ngOnInit() ¶	() => `void`		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.

Types Documentation¶

HeaderWithDropdowns

¶

Interface

Properties
Whether the dropdown should be opened inline. inlineDropdown: `Signal`<`boolean`>¶
The position of the dropdown if opened in an overlay. overlayPosition?: `ConnectedPosition`[]¶

Methods

dropdownClosed

(trigger: SiHeaderDropdownTriggerDirective) => void¶

Called whenever a dropdown is close *

Parameters
trigger: `SiHeaderDropdownTriggerDirective`¶

dropdownOpened

(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¶

SiHeaderDropdownTriggerDirective

implements OnChanges, OnInit, OnDestroy¶

Class

▶

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 rendered inside the dropdown. dropdown: `InputSignal`<`TemplateRef`<`unknown`>> = ...¶
dropdownClose: `Subject`<`void`> = ...¶
Context data passed to the dropdown template. dropdownData: `InputSignal`<`unknown`> = ...¶
elementRef: `ElementRef`<`HTMLElement`> = ...¶
headerAnchorComponentRef?: `ComponentRef`<`SiHeaderAnchorComponent`>¶
id: `string` = ...¶
injector: `DestroyableInjector` = ...¶
Whether the dropdown is opened inline (mobile) instead of in an overlay (desktop). Inline dropdowns are simple disclosure groups, while overlay dropdowns are dialogs. inline: `Signal`<`boolean`> = ...¶
level: `number` = ...¶
navbar: (`HeaderWithDropdowns` \| `null`) = ...¶
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: (`SiHeaderDropdownTriggerDirective` \| `null`) = ...¶
portal?: `TemplatePortal`<`unknown`>¶
viewContainerRef: `ViewContainerRef` = ...¶
viewRef?: `EmbeddedViewRef`<`unknown`>¶
idCounter: `number` = `0`¶

Accessors
Whether the dropdown is currently open. get isOpen: `boolean`¶
get isOverlay: `boolean`¶

Methods

attachDropdownInline: () => void¶

attachDropdownOverlay: () => void¶

click: () => void¶

close

(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¶

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