Skip to content

SiDashboardComponent documentation

selector
si-dashboard

Input Properties

NameTypeDefaultDescription
enableExpandInteractions
booleanfalseOpt-in to enable expand interaction for all cards.
heading
stringHeading for the dashboard page.
hideMenubar
booleanfalseOption to hide the menu bar.
sticky
booleantrueOption to turn off the sticky behavior of the heading and menu bar.

Attributes and Methods

NameTypeDefaultDescription
expand(...)
(card: SiDashboardCardComponent) => voidExpands the provided card to full size in the dashboard.

Parameters
(readonly) isExpanded
booleanfalseIs true if a card is expanded.
restore()
() => voidRestores the expanded card to it's previous position.

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.
("collapsible" | "expanded" | "mobile")
((MenuItemAction | MenuItemCheckbox | MenuItemLink | MenuItemRouterLink | MenuItemGroup) & { iconOnly: boolean })
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
Translatable
import
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"
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
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
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 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
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
Used in events emitted from SiLinkActionService
Properties
param: any
extends SiCardComponent implements OnDestroy
Constructor
() => {}
Properties
Optional setting of html title attribute for the content action bar. Helpful for a11y when only one action is configured in expand mode.
actionBarTitle: InputSignal<TranslatableString> from actionBarTitle = ''
actionBarTitleComputed: Signal<TranslatableString> = ...
The view type of the content action bar of the card. Default is collapsible for dashboards. However, in some cases you might need to change to expanded or mobile .
actionBarViewType: InputSignal<ViewType> from actionBarViewType = 'collapsible'
actionBarViewTypeComputed: Signal<ViewType> = ...
A param that will be passed to the action in the primary/secondary actions. This allows to re-use the same primary/secondary action arrays across rows in a table.
actionParam: InputSignal<any> from actionParam = ...
In case the card uses an image and horizontal direction is used we set flex row direction.
classCardHorizontal: Signal<boolean> from classCardHorizontal = ...
dashboardService: (null | SiDashboardService) = ...
Returns true when primary or secondary actions are set.
displayContentActionBar: Signal<boolean> = ...
element: ElementRef<any> = ...
Option to enable and show the UI controls for card expand functionality. Expand and restore action items will be added to the content action bar. The expand resizing has to be implemented by the container of the card.
enableExpandInteraction: InputSignalWithTransform<boolean, unknown> = false
enableExpandInteractionComputed: Signal<boolean> = ...
enableExpandInteractionInternal: WritableSignal<boolean> = ...
expandActionItem: Signal<ContentActionBarMainItem> = ...
Emitter for size state change
expandChange: OutputEmitterRef<boolean> = ...
expandRestoreIconTooltip: Signal<TranslatableString> = ...
Description of expand button & action.
expandText: InputSignal<TranslatableString> = $localize`:@@SI_DASHBOARD.EXPAND:Expand`
hasContentBarActions: Signal<boolean> = ...
Card header text.
heading: InputSignal<(undefined | TranslatableString)> from heading = ...
hide: boolean = false
Alt text for a provided image.
imgAlt: InputSignal<(undefined | string)> from imgAlt = ...
Defines if an image is placed on top or start (left) of the card.
imgDir: InputSignal<(undefined | "horizontal" | "vertical")> from imgDir = 'vertical'
Sets the image object-fit CSS property, Sets the image object-fit CSS property.
imgObjectFit: InputSignal<(undefined | "fill" | "contain" | "cover" | "none" | "scale-down")> from imgObjectFit = 'scale-down'
Sets the image object-position CSS property.
imgObjectPosition: InputSignal<(undefined | string)> from imgObjectPosition = ...
Image source for the card.
imgSrc: InputSignal<(undefined | string)> from imgSrc = ...
Whether the card is currently expanded.
isExpanded: WritableSignal<boolean> = false
Input list of primary action items. Supports up to 4 actions and omits additional ones.
primaryActions: InputSignal<(MenuItem | ContentActionBarMainItem)[]> from primaryActions = []
primaryActionsComputed: Signal<(MenuItem | ContentActionBarMainItem)[]> = ...
restoreActionItem: Signal<ContentActionBarMainItem> = ...
Description of cancel button & action.
restoreText: InputSignal<TranslatableString> = $localize`:@@SI_DASHBOARD.RESTORE:Restore`
Input list of secondary action items.
secondaryActions: InputSignal<(MenuItem | MenuItem)[]> from secondaryActions = []
Used in combination with si-dashboard to show filters when a card is expanded or not.
showMenubar: InputSignalWithTransform<boolean, unknown> = true
Methods
Expand the dashboard card.
expand: () => void
(expand: boolean) => void
Parameters
expand: boolean
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
Restore the dashboard card to the original, non-expanded state.
restore: () => void
Constructor
() => {}
Properties
Optional setting of html title attribute for the content action bar. Helpful for a11y when only one action is configured in expand mode.
actionBarTitle: InputSignal<TranslatableString> = ''
The view type of the content action bar of the card. Default is collapsible for dashboards. However, in some cases you might need to change to expanded or mobile .
actionBarViewType: InputSignal<ViewType> = 'collapsible'
A param that will be passed to the action in the primary/secondary actions. This allows to re-use the same primary/secondary action arrays across rows in a table.
actionParam: InputSignal<any> = ...
In case the card uses an image and horizontal direction is used we set flex row direction.
classCardHorizontal: Signal<boolean> = ...
Returns true when primary or secondary actions are set.
displayContentActionBar: Signal<boolean> = ...
Card header text.
heading: InputSignal<(undefined | TranslatableString)> = ...
Alt text for a provided image.
imgAlt: InputSignal<(undefined | string)> = ...
Defines if an image is placed on top or start (left) of the card.
imgDir: InputSignal<(undefined | "horizontal" | "vertical")> = 'vertical'
Sets the image object-fit CSS property, Sets the image object-fit CSS property.
imgObjectFit: InputSignal<(undefined | "fill" | "contain" | "cover" | "none" | "scale-down")> = 'scale-down'
Sets the image object-position CSS property.
imgObjectPosition: InputSignal<(undefined | string)> = ...
Image source for the card.
imgSrc: InputSignal<(undefined | string)> = ...
Input list of primary action items. Supports up to 4 actions and omits additional ones.
primaryActions: InputSignal<(MenuItem | ContentActionBarMainItem)[]> = []
Input list of secondary action items.
secondaryActions: InputSignal<(MenuItem | MenuItem)[]> = []
Constructor
() => {}
Properties
cards: BehaviorSubject<SiDashboardCardComponent[]> = ...
Subject containing the current dashboard cards as a list.
cards$: Observable<SiDashboardCardComponent[]> = this.cards.asObservable()
Methods
(card: SiDashboardCardComponent) => void
Registers a new dashboard card.
Parameters
card: SiDashboardCardComponent
(card: SiDashboardCardComponent) => void
Removes a registered dashboard card.
Parameters
card: SiDashboardCardComponent
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.