Skip to content

SiAttachmentListComponent documentation

selector
si-attachment-list

Attachment list component for displaying file attachments in chat messages.

This component renders a list of file attachments with icons, names, and optional preview and remove functionality. It's designed to work with chat message components to show files that have been uploaded or shared in conversations.

This component provides: - A list of pills showing each attachment's name and an icon - Optional preview modal for attachments - Optional remove functionality for editable messages

The component is included within SiUserMessageComponent , SiAiMessageComponent and SiChatInputComponent but can also be used inside custom chat messages with SiChatMessageComponent

See - SiUserMessageComponent for user message display - SiAiMessageComponent for AI message display - SiChatMessageComponent for custom chat message display - SiChatInputComponent for chat input with attachment support - Attachment for attachment data structure

Input Properties

NameTypeDefaultDescription
alignment
("end" | "start")'start'Whether to align attachments to the end (right) or start (left)
attachments
Attachment[][]List of attachments to display
removable
booleanfalseWhether to show remove buttons on attachments
removeLabel
TranslatableString$localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`Label for remove attachment button. The attachment name is available with {{attachment}} .

Output Properties

NameTypeDescription
remove
AttachmentEmitted when an attachment should be removed

Types Documentation

Attachment item interface for file attachments in chat messages, used by SiAttachmentListComponent and inside SiUserMessageComponent as well as SiChatInputComponent .
See - SiAttachmentListComponent for the attachment list component - SiUserMessageComponent for the user message - SiChatInputComponent for the chat input component
Properties
File name
name: string
Optionally show a preview of the attachment by providing a template that is shown in a modal when clicked (optional)
previewTemplate?: (TemplateRef<any> | () => TemplateRef<any>)
(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.
Actions for messages representing an action with icon, label (for accessibility), and handler, for use within SiAiMessageComponent and SiUserMessageComponent . Only the icon will be displayed.
See - SiAiMessageComponent for the AI message - SiUserMessageComponent for thee user message
Properties
Action that is called when the item is triggered.
action: (actionParam: any, source: this) => void
Whether the menu item is disabled.
disabled?: boolean
Icon used to represent the action
icon: string
Label that is shown to the user.
label: TranslatableString
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
Definition of a single source
Properties
Optional source description.
description?: string
Source name displayed to the user.
name: string
Optional source quote. Takes precedence over description .
quote?: string
Source URL.
url: string
extends Attachment
Attachment item interface for file attachments in chat messages, extension of Attachment for SiAttachmentListComponent to use within SiChatInputComponent . Adds the action file information. Can be used within SiChatContainerComponent .
See - Attachment for base attachment interface - SiAttachmentListComponent for the attachment list component - SiChatInputComponent for the chat input component - SiChatContainerComponent for the chat container component
Properties
File object
file: File
File name
name: string from name
Optionally show a preview of the attachment by providing a template that is shown in a modal when clicked (optional)
previewTemplate?: (TemplateRef<any> | () => TemplateRef<any>) from previewTemplate
File size in bytes
size: number
MIME type
type: string
extends UploadFile
Properties
errorParams?: Record<string, unknown> from errorParams
errorText: TranslatableString
file: File from file
fileName: string from fileName
progress: number from progress
size: string from size
status: "invalid"
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"
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"
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 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
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"
import
imported from @types/node
Properties
errorParams?: Record<string, unknown>
errorText?: TranslatableString
file: File
fileName: string
progress: number
size: string
status: ("error" | "invalid" | "success" | "added" | "queued" | "uploading")
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
string from description
Property
Optional source description.
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
<T: never, CT: any>
Reference to a modal dialog
Constructor
() => {}
Properties
The default close value of the modal.
closeValue?: CT
The modal options passed during creation.
See SiModalService
data: ModalOptions = {}
detach: () => void = () =​> {}
Custom class for modal-dialog
dialogClass: string = ''
Emits the close value when the modal is hidden.
hidden: Subject<(CT | undefined)> = ...
Close the modal with a custom close value.
hide: (reason: CT) => void = () =​> {}
ignoreBackdropClick: boolean = true
isCurrent: () => boolean = () =​> false
The layer of the modal. The modal with the highest layer will be shown on top.
layer: number = 0
Allows messaging state to consumer w/o closing the dialog.
message: Subject<(CT | undefined)> = ...
Emits the modal element reference when it is shown.
shown: ReplaySubject<ElementRef<any>> = ...
Accessors
get content: T
Methods
(reason: CT) => void
When data.disableAutoHide is set, messages the reason , otherwise calls hide .
Parameters
reason?: CT
(input: string, value: unknown) => void
Set the input of a component shown in the modal.
Parameters
input: string
value: unknown
<T: Record<string, any>> extends ModalDependencyInjectionOptions
Properties
Whether to enable animation.
animated?: boolean
aria-labelled-by value.
ariaLabelledBy?: string
Additional CSS class.
class?: string
Optional environment Injector.
environmentInjector?: EnvironmentInjector from environmentInjector
When set to true, clicking the backdrop has no effect.
ignoreBackdropClick?: boolean
Optional element Injector.
injector?: Injector from injector
Use this to assign values to either @Input() or input() fields of the provided component. If a template is used, the values are available in the template context.
inputValues?: Record<string, unknown>
Handle Esc to close/message.
keyboard?: boolean
When set to true, backdrop click or Esc don't close the modal. Instead a message will be sent.
messageInsteadOfAutoHide?: boolean
Additional providers for the modal.
providers?: StaticProvider[] from providers
Properties
Optional environment Injector.
environmentInjector?: EnvironmentInjector
Optional element Injector.
injector?: Injector
Additional providers for the modal.
providers?: StaticProvider[]
Used in events emitted from SiLinkActionService
Properties
param: any
User message component for displaying the user's messages in conversational interfaces.

The user message component renders user-submitted content in (AI) chat interfaces, supporting text, attachments, and contextual actions. It appears as a text bubble aligned to the right side. Can be used within SiChatContainerComponent .

The component automatically handles: - Styling for user messages distinct from AI or generic chat messages - Displaying attachments above the message bubble - Displaying primary and secondary actions

See - SiChatMessageComponent for the base message wrapper component - SiAiMessageComponent for the AI message component - SiAttachmentListComponent for the base attachment component - SiChatContainerComponent for the chat container to use this within
Constructor
() => {}
Properties
Parameter to pass to action handlers
actionParam: InputSignal<any> = ...
Primary message actions (edit, delete, copy, etc.). All actions displayed inline
actions: InputSignal<MessageAction[]> = []
List of attachments included with this message
attachments: InputSignal<Attachment[]> = []
The user message content
content: InputSignal<string> = ''
hasAttachments: Signal<boolean> = ...
icons: Record<"elementOptionsVertical", string> = ...
Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
secondaryActions: InputSignal<MenuItem[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:Additional actions`
AI message component for displaying AI-generated responses in conversational interfaces.

The AI message component renders AI-generated content in chat interfaces, supporting text, loading states, and contextual actions. It appears as text (no bubble) aligned to the left side without any avatar/icon slot. Can be used within SiChatContainerComponent .

The component automatically handles: - Styling for AI messages distinct from user or generic chat messages - Showing loading states with skeleton UI during generation - Displaying primary and secondary actions

See - SiChatMessageComponent for the base message wrapper component - SiUserMessageComponent for the user message component - SiChatContainerComponent for the chat container to use this within
Constructor
() => {}
Properties
Parameter to pass to action handlers
actionParam: InputSignal<unknown> = ...
Primary actions available for this message (thumbs up/down, copy, retry, etc.) All actions displayed inline
actions: InputSignal<MessageAction[]> = []
The AI-generated message content
content: InputSignal<string> = ''
icons: Record<"elementOptionsVertical", string> = ...
Whether the message is currently being generated (shows skeleton)
loading: InputSignalWithTransform<boolean, unknown> = false
Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
secondaryActions: InputSignal<MenuItem[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:Additional actions`
Emitted when a source has been clicked.
sourceClicked: OutputEmitterRef<SourceReference> = ...
Source references
sources: InputSignal<(SourceReference[] | undefined)> = ...
implements AfterViewInit
Chat input component for composing and sending messages in conversational interfaces.

The chat input component provides a text area for users to compose messages, supporting text, attachments, and contextual actions. It appears as a textarea with buttons for adding attachments and sending messages, as well as an optional disclaimer.

The component automatically handles: - Styling for chat input and actions. - Dynamic resizing of the textarea based on content. - Uploading of and displaying of attachments above the input area. - Displaying primary and secondary actions.

Additionally to the inputs and outputs documented here, the component supports content projection via the following slots: - Default content: Custom action buttons to display inline, prefer using the actions input for buttons, can be used in addition. - siChatInputDisclaimer selector: Custom disclaimer content to display below the input area, prefer using the disclaimer input for simple text disclaimers.

See - SiAttachmentListComponent for the base attachment component - SiChatInputDisclaimerDirective to slot in custom disclaimer content
Constructor
() => {}
Properties
Accepted file types for attachments (as accept string)
accept: InputSignal<(string | undefined)> = undefined
Parameter to pass to action handlers
actionParam: InputSignal<any> = ...
Primary actions available in the input. Provide at most one action.
actions: InputSignal<MessageAction[]> = []
Whether file attachments are supported
allowAttachments: InputSignal<boolean> = false
Attach file button aria label
attachFileLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file`
Current attachments
attachments: ModelSignal<ChatInputAttachment[]> = []
Auto-focus the input on component initialization
autoFocus: InputSignalWithTransform<boolean, unknown> = false
buttonDisabled: Signal<boolean> = ...
buttonIcon: Signal<string> = ...
buttonLabel: Signal<TranslatableString> = ...
canSend: Signal<boolean> = ...
combinedMenuActions: Signal<MenuItem[]> = ...
Whether the input is disabled
disabled: InputSignalWithTransform<boolean, unknown> = false
A disclaimer to display.

If not provided, the component will look for projected content with the siChatInputDisclaimer directive. If both are empty, no disclaimer section will be shown (handled via CSS :empty).
disclaimer: InputSignal<(TranslatableString | undefined)> = ...
dragOver: WritableSignal<boolean> = ...
Emitted when file upload errors occur
fileError: OutputEmitterRef<FileUploadError> = ...
fileInput: Signal<(ElementRef<HTMLInputElement> | undefined)> = ...
fileUploadDirective: Signal<(SiFileUploadDirective | undefined)> = ...
Suggested follow-up prompts to display as pill buttons above the chat input. Use followUpPromptSelected to handle selection and update the input value. Typically populated from AI response data and cleared after selection or on send.
followUpPrompts: InputSignal<string[]> = []
Emitted when the user selects a follow-up prompt. The emitted value is the text of the selected prompt.
followUpPromptSelected: OutputEmitterRef<string> = ...
hasActions: Signal<boolean> = ...
hasAttachments: Signal<boolean> = ...
hasContent: Signal<boolean> = ...
hasMenuActions: Signal<boolean> = ...
hasSecondaryActions: Signal<boolean> = ...
icons: Record<("elementAttachment" | "elementPlus" | "elementSendFilled" | "elementStopFilled"), string> = ...
id: string = ...
injector: Injector = ...
Emitted when the user wants to interrupt the current operation
interrupt: OutputEmitterRef<void> = ...
Interrupt button label
interruptButtonLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.INTERRUPT:Stop processing`
Whether the input supports interrupting ongoing operations. When active, the send button transforms into an interrupt button (with element-stop-filled icon). If sending is true, the interrupt button will be disabled.
interruptible: InputSignalWithTransform<boolean, unknown> = false
The label for the input, used for accessibility
label: InputSignal<string> = t(() =​> $localize`:@@SI_CHAT_INPUT.LABEL:Chat input`)
Maximum file size in bytes
maxFileSize: InputSignal<number> = 10485760 (10MB)
Maximum number of characters allowed
maxLength: InputSignal<(number | undefined)> = ...
Placeholder text for the input
placeholder: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`
Remove attachment aria label. The attachment name is available with {{attachment}} .
removeAttachmentLabel: InputSignal<TranslatableString> = $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`
Secondary actions available in dropdown menu
secondaryActions: InputSignal<MenuItem[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:Additional actions`
Emitted when the user wants to send a message
send: OutputEmitterRef<{ attachments: ChatInputAttachment[], content: string }> = ...
Send button icon
sendButtonIcon: InputSignal<string> = this.icons.elementSendFilled
Send button label
sendButtonLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.SEND:Send`
Whether a message is currently being sent, also prevent the sending of new ones while still allowing the user to type
sending: InputSignalWithTransform<boolean, unknown> = false
showInterruptButton: Signal<boolean> = ...
textInput: Signal<(ElementRef<HTMLTextAreaElement> | undefined)> = ...
Current input value
value: ModelSignal<string> = ''
idCounter: number = 0
Methods
(event: Event) => void
Parameters
event: Event
(event: DragEvent) => void
Parameters
event: DragEvent
(event: DragEvent) => void
Parameters
event: DragEvent
Focus the textarea input
focus: () => void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit
onButtonClick: () => void
(event: Event) => void
Parameters
event: Event
(error: FileUploadError) => void
Parameters
error: FileUploadError
(uploadFiles: UploadFile[]) => void
Parameters
uploadFiles: UploadFile[]
(value: string) => void
Parameters
value: string
(event: KeyboardEvent) => void
Parameters
event: KeyboardEvent
onSend: () => void
(attachment: Attachment) => void
Parameters
attachment: Attachment
(prompt: string) => void
Parameters
prompt: string
(textarea: HTMLTextAreaElement) => void
Parameters
textarea: HTMLTextAreaElement
triggerFileInput: () => void
Base declarative chat message component that provides the layout structure for chat messages.

This component handles the core message layout including avatar positioning, loading states, and action button as well as attachment list placement. It serves as the foundation for more specialized message components like SiUserMessageComponent and SiAiMessageComponent . Can be used within SiChatContainerComponent .

The component provides: - Flexible alignment (start/end) for different message types - Avatar/icon slot for message attribution - Loading state with skeleton UI - Action buttons positioned on the side or bottom - Attachment list display slot - Responsive behavior that adapts to container size

This is a low-level component designed for slotting in custom content, it provides slots via content projection: - Default content: Main message content area (consider using si-markdown for markdown support) - si-avatar/si-icon/img selector: Avatar or icon representing the message sender - si-chat-message-action selector: Action buttons related to the message - si-attachment-list selector: Attachment list component for displaying file attachments

See - SiUserMessageComponent for user message display - SiAiMessageComponent for AI message display - SiAttachmentListComponent for attachment list to slot in - SiChatMessageActionDirective for action buttons to slot in - SiChatContainerComponent for the chat container to use this within
Constructor
() => {}
Properties
Where to display action buttons (if any)
actionsPosition: InputSignal<("bottom" | "side")> = 'side'
Alignment of the message
alignment: InputSignal<("end" | "start")> = 'start'
Whether the message is currently loading
loading: InputSignal<boolean> = false
implements AfterContentInit, OnDestroy
A declarative container component for displaying a chat interface with automatic scroll-to-bottom behavior.

This component provides the layout and styling for a chat interface, managing scrolling behavior to keep the newest messages visible while respecting user scrolling actions. It automatically scrolls to the bottom when new content is added, unless the user has scrolled up to view older messages.

Use via content projection: - Default content: Chat messages displayed in the scrollable messages container or a welcome screen (empty state). - si-inline-notification selector: Notification component displayed above the input area - si-chat-input or [siChatContainerInput] selector: Input controls for composing messages

See - SiChatInputComponent for the chat input wrapper component - SiChatContainerInputDirective for other input controls to slot in - SiAiMessageComponent for AI messages to slot in - SiUserMessageComponent for user messages (in AI chats) to slot in - SiChatMessageComponent for the chat message wrapper component to slot in other messages
Constructor
() => {}
Properties
The color variant to apply to the container.
colorVariant: InputSignal<string> = 'base-0'
contentObserver: (MutationObserver | undefined)
isUserAtBottom: boolean = true
lastScrollTime: number = 0
messagesContainer: Signal<(ElementRef<HTMLDivElement> | undefined)> = ...
Disables automatic scrolling to the bottom when new content is added.
noAutoScroll: InputSignalWithTransform<boolean, (string | boolean)> = false
pendingScroll: boolean = false
platformId: Object = ...
resizeObserver: (ResizeObserver | undefined)
scrollDebounceMs: number = 7
scrollTimeout: (Timeout | undefined)
Methods
checkIfUserAtBottom: () => void
debouncedScrollToBottom: () => void
Focuses the messages container element.
focus: () => void
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 custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
onScroll: () => void
Scrolls to the bottom of the messages container immediately. This method forces a scroll even if the user has scrolled up.
scrollToBottom: () => void
scrollToBottomDuringStreaming: () => void
Scrolls to the top of the messages container immediately.
scrollToTop: () => void
setupContentObserver: () => void
setupResizeObserver: () => void
Directive to mark content as chat input disclaimer into SiChatInputComponent . Apply this directive to content that should be slotted into the disclaimer area.

Example:
<si-chat-input>
  <div siChatInputDisclaimer>
    Custom disclaimer content
  </div>
</si-chat-input>


See SiChatInputComponent for the chat input wrapper component
Constructor
() => {}
Directive to mark content as chat message actions into SiChatMessageComponent . Apply this directive to e.g. buttons that should be slotted into the message actions area.

Example:
<si-chat-message>
  Message content
  <button siChatMessageAction>Like</button>
  <button siChatMessageAction>Share</button>
</si-chat-message>


See SiChatMessageComponent for the chat message wrapper component
Constructor
() => {}
A directive to mark elements as input controls within a SiChatContainerComponent .

This directive is used to identify and style input elements that belong to the chat container component, typically applied to form inputs or textareas used for composing chat messages.

Example:
<si-chat-container>
  <si-chat-message>Hello!</si-chat-message>
  <si-chat-message>How are you?</si-chat-message>

  <input siChatContainerInput type="text" placeholder="Type a message..." />
</si-chat-container>


See SiChatContainerComponent for the chat container wrapper component
Constructor
() => {}
Directive for handling file uploads with validation for file type and size.

Example:
<input
  #fileInput
  type="file"
  class="d-none"
  siFileUpload
  [accept]="accept()"
  [maxFileSize]="maxFileSize()"
  [multiple]="true"
  (validFiles)="onFilesAdded($event)"
  (fileError)="onFileError($event)"
/>
Constructor
() => {}
Properties
Define which file types are suggested in file browser.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
accept: InputSignal<(string | undefined)> = ...
Enable directory upload.
directoryUpload: InputSignalWithTransform<boolean, unknown> = false
elementRef: ElementRef<any> = ...
Message or translation key if file exceeds the maximum file size limit.
errorTextFileMaxSize: InputSignal<TranslatableString> = $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`
Text or translation key of message title if incorrect file type is dragged / dropped.
errorTextFileType: InputSignal<TranslatableString> = $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`
Event emitted when file validation errors occur, including files that were ignored due to size or type.
fileError: OutputEmitterRef<FileUploadError> = ...
Event emitted when valid files are added. Also includes invalid files, but with status 'invalid' and an errorText describing why they were ignored.
filesAdded: OutputEmitterRef<UploadFile[]> = ...
locale: string = ...
Define maximal allowed file size in bytes.
maxFileSize: InputSignal<(number | undefined)> = ...
Defines whether the file input allows selecting multiple files. When directoryUpload is enabled, this will have no effect.
multiple: InputSignalWithTransform<boolean, unknown> = false
numberFormat: NumberFormat = ...
Event emitted when valid files are added. Invalid files (due to size or type) will be ignored and instead the fileError event will be emitted.
validFiles: OutputEmitterRef<UploadFile[]> = ...
Methods
(num: number) => string
Parameters
num: number
(files: (FileList | null)) => void
Handle files from input or drag and drop
Parameters
files: (FileList | null)
(items: DataTransferItemList) => void
Handle directory entries for drag and drop
Parameters
items: DataTransferItemList
(file: File) => UploadFile
Parameters
file: File
(event: Event) => void
Parameters
event: Event
Reset the file input value
reset: () => void
Trigger the file input click
triggerClick: () => void
(size: number) => boolean
Parameters
size: number
(fileType: (string | undefined), ext: (string | undefined)) => boolean
Parameters
fileType: (string | undefined)
ext: (string | undefined)
(num: number, formatter: NumberFormat) => string
Parameters
num: number
formatter?: NumberFormat
Constructor
() => {}
Properties
appRef: ApplicationRef = ...
environmentInjector: EnvironmentInjector = ...
injector: Injector = ...
modalsCount: number = 0
overlay: Overlay = ...
Methods
<T, CT> (modalRef: ModalRefImpl<T, CT>) => ComponentRef<SiModalComponent>
Parameters
modalRef: ModalRefImpl<T, CT>
buildInjector: () => Injector
(modalRef: ModalRef<unknown, any>) => void
Parameters
modalRef: ModalRef<unknown, any>
<T, CT> (injector: Injector, modalRef: ModalRefImpl<T, CT>) => Node[][]
Parameters
injector: Injector
modalRef: ModalRefImpl<T, CT>
<T, CT: any> (content: (TemplateRef<any> | (args: any[]) => {}), config: ModalOptions<T>, closeValue: CT) => ModalRef<T, CT>
Shows a modal with the given content and configuration.
Returns A reference to the modal.
Parameters
Content to be displayed in the modal can be a template reference or a component.
content: (TemplateRef<any> | (args: any[]) => {})
Configuration for the modal.
config: ModalOptions<T>
Default closing value which can be overridden by calling modalRef.hide(value) .
closeValue?: CT
Constructor
() => {}
Properties
Parameter passed to triggered menu item actions.
actionParam: InputSignal<unknown> = ...
Menu items to render. Supports legacy and current menu item models.
items: InputSignal<(readonly (MenuItem | MenuItem)[] | undefined)> = ...
linkActionService: (SiLinkActionService | null) = ...
menuActionService: (SiMenuActionService | null) = ...
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)
(index: number, item: (MenuItem | MenuItem)) => (string | number)
Parameters
index: number
item: (MenuItem | MenuItem)
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.