# AttachmentListComponent The `AttachmentList` component displays the attachments of a message. The following attachments are supported: - Images (including GIFs) are displayed inline - Videos are displayed inline - Voice recordings are displayed inline (the Angular SDK doesn't support recording, only playback) - Other files can be downloaded - Links in a message are enriched with built-in open graph URL scraping **Example 1** - different type of attachments: ![Attachments Screenshot](@chat-sdk/angular/v7-latest/_assets/attachments-screenshot.png) **Example 2** - voice recording: ![Voice Recording Screenshot](@chat-sdk/angular/v7-latest/_assets/voice-recording-screenshot.png) ## Basic Usage A typical use case for the `AttachmentList` component would be to use in your custom components that will completely override the message component. **Example 1** - a basic example: ```typescript @Component({ selector: "app-custom-message", template: ` `, }) export class CustomMessageComponent { @Input() message: StreamMessage; hasAttachment: boolean; } ``` ## Customization You can use the [`AttachmentConfigurationService`](/chat/docs/sdk/angular/v4/services/AttachmentConfigurationService/) to override certain attributes of attachments. You can provide your own attachment list component by the [`CustomTemplatesService`](/chat/docs/sdk/angular/v4/services/CustomTemplatesService/) You can override attachment display by attachment types, here are the available options for this: - [Single image](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#imageattachmenttemplate/): this template is used if a message has only one image attachment. Please note that your template is responsible for proper image sizing (see below). - [Gallery image](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#galleryattachmenttemplate/): this template is used if a message has multiple image attachments, the template will receive all image attachments. Please note that your template is responsible for proper image sizing (see below). - [Video attachment](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#videoattachmenttemplate/): this template is used to display video attachments. Please note that your template is responsible for proper image sizing (see below). - [File attachment](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#fileattachmenttemplate/): this template is used to display file type attachments - [Voice recording](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#voicerecordingattachmenttemplate/): this template is used to display voice recordings - [Card attachment](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#cardattachmenttemplate/): this template is used to display GIFs or open graph URL data - [Attachment actions](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#attachmentactionstemplate/): this template is used to display attachment actions ### Image and video sizing The following section details how the width and height of images and videos uploaded from files are computed. #### Maximum size You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](/chat/docs/sdk/angular/v4/theming/component-variables/) CSS variable (available only in [theme-v2](/chat/docs/sdk/angular/v4/theming/themingv2/)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel). If you set an invalid value to the variable, you'll see a warning on the browser's console: ![Attachment Size Warning](@chat-sdk/angular/v7-latest/_assets/attachment-size-warning.png) #### File size optimization Based on the CSS settings provided for images and videos, the SDK will load an image (or thumbnail image in case of a video file) with a reduced file size while still providing sufficient image quality for the given dimensions. This will result in less network traffic and faster image load for users. #### Aspect ratio The following description is applicable for [theme-v2](/chat/docs/sdk/angular/v4/theming/themingv2/). The SDK will try to display images and videos with their original aspect ratio, however this isn't always guaranteed (in those cases a cropped image will be displayed). Three notable exceptions are: 1. if a message contains multiple lines of texts and/or multiple attachments, the image/video might be stretched to its `max-width` **Example 1** - message with one line of text ![Image Sizing Screenshot 1](@chat-sdk/react/v13/_assets/ImageSizing1.png) **Example 2** - message with multiple lines of text ![Image Sizing Screenshot 2](@chat-sdk/react/v13/_assets/ImageSizing2.png) 2. in Safari, images/videos with portrait orientation are stretched to `max-width` **Example 3** - portrait images in Safari ![Image Sizing Screenshot 3](@chat-sdk/react/v13/_assets/ImageSizing3.png) 3. if the image/video can't be rendered with the original aspect ratio given the `max-width` and `max-height` constraints of the host HTML element **File size optimization** and maintaining **aspect ratio** uses features provided by Stream's CDN. If you're using your **own CDN** you'll likely have to provide your own implementation for this. You can do this using the [`AttachmentConfigurationService`](/chat/docs/sdk/angular/v4/services/AttachmentConfigurationService/). **If you're planning to rewrite attachment sizing with your own CSS code** it's important to note that: The sizing logic for images and videos inside the [`AttachmentConfigurationService`](/chat/docs/sdk/angular/v4/services/AttachmentConfigurationService/) requires that host elements of images and videos (usually `img` and `video` elements) have `max-height`/`height` and `max-width` properties defined and that these values can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) (for more information refer to the [Maximum size](#maximum-size) section). [//]: # "Start of generated content" ## Inputs and outputs ### messageId • **messageId**: `undefined` \| `string` The id of the message the attachments belong to #### Defined in [lib/attachment-list/attachment-list.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40) --- ### parentMessageId • **parentMessageId**: `undefined` \| `string` The parent id of the message the attachments belong to #### Defined in [lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44) --- ### attachments • **attachments**: `Attachment[]` = `[]` The attachments to display #### Defined in [lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48) --- ### imageModalStateChange • `Readonly` **imageModalStateChange**: `EventEmitter<"opened" | "closed">` Emits the state of the image carousel window #### Defined in [lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52) [//]: # "End of generated content" --- This page was last updated at 2026-06-09T08:45:22.244Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v4/components/AttachmentListComponent/](https://getstream.io/chat/docs/sdk/angular/v4/components/AttachmentListComponent/).