Skip to content

SiHeaderAccountItemComponent documentation

selector
button[si-header-account-item]

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

Input Properties

Name Type Default Description
accountItemLabel
 TranslatableString $localize`:@@SI_APPLICATION_HEADER.ACCOUNT:Account of {{name}}` Accessible label for the account item.
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
imageUrl
 string URL to an image which should be shown instead of the initials.
initials
 string Initials of the account. If not provided, they will be calculated.
name
Required		 string Name of the account.

Attributes and Methods

Name Type Default Description
ngOnChanges(...)
 (changes: { accountItemLabel: t(() =​> $localize`:@@SI_APPLICATION_HEADER.ACCOUNT:Account of {{name}}`), badge: SimpleChange<(number | boolean | null | undefined)>, dropdownTrigger: SimpleChange<(SiHeaderDropdownTriggerDirective | null)>, imageUrl: SimpleChange<(string | undefined)>, initials: SimpleChange<(string | undefined)>, name: SimpleChange<string>, ngOnChanges: SimpleChange<(changes: { readonly name?&#58; SimpleChange&lt;string&gt; \| undefined; readonly initials?&#58; SimpleChange&lt;string \| undefined&gt; \| undefined; readonly imageUrl?&#58; SimpleChange&lt;string \| undefined&gt; \| undefined; ... 4 more ...; ngOnInit?&#58; SimpleChange&lt;...&gt; \| 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
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

(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.
Properties
Whether the dropdown should be opened inline.
inlineDropdown: Signal<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
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
(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.