# MessageComponent The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (for example edit or react)](https://getstream.io/chat/docs/sdk/angular/concepts/message-interactions/). **Example 1** - example message: ![Message Screenshot](https://getstream.io/docs-assets/images/4887294e72dc.png) **Example 2** - message with reactions: ![Message Reactions Screenshot](https://getstream.io/docs-assets/images/f026424caf66.png) **Example 3** - message actions: ![Message Actions Screenshot](https://getstream.io/docs-assets/images/1ba99138c12d.png) ## Customization The message list uses the `Message` component to display messages, if you want to replace that with your own custom component, you can do that by providing it to the [`CustomTemplatesService`](https://getstream.io/chat/docs/sdk/angular/services/CustomTemplatesService#messagetemplate). It's also possible to just override parts of the message component. The `Message` component uses the [`DateParserService`](https://getstream.io/chat/docs/sdk/angular/services/DateParserService/) to create user-friendly dates, you can override the date-parsing methods with your own functions. The [`MessageService`](https://getstream.io/chat/docs/sdk/angular/services/MessageService/) has additional customization options. If you want to build your own `Message` component, you might find the following building blocks useful: ### Avatar The `Message` component uses the [`Avatar`](https://getstream.io/chat/docs/sdk/angular/components/AvatarComponent/) component to display the sender's photo. ### Message actions The `Message` component uses the [`MessageActionsBox`](https://getstream.io/chat/docs/sdk/angular/components/MessageActionsBoxComponent/) component to enable interaction with the message (edit). ### Message reactions The `Message` component uses the [`MessageReactions`](https://getstream.io/chat/docs/sdk/angular/components/MessageReactionsComponent/) component to display reactions of a message, and enable reacting to a message. ### Attachments The `Message` component uses the [`AttachmentList`](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/) component to display the attachments of the message. ### Read by The `Message` component uses the [`listUsers`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/list-users.ts) utility function to display the list of people who have read a particular message in a user friendly way (for example _Bob, Sophie, Jack, Rose, John and 1 more_). ### Loading indicator The `Message` component uses the [`LoadingIndicator`](https://getstream.io/chat/docs/sdk/angular/components/LoadingIndicatorComponent/) component to display a spinner while the message is being sent. ### Icons The `Message` component uses the [`Icon`](https://getstream.io/chat/docs/sdk/angular/components/IconComponent/) component to display icons. ## Mention template You can add interactions to mentions inside a message, follow our [mention actions guide](https://getstream.io/chat/docs/sdk/angular/code-examples/mention-actions/) to get to know more. [//]: # "Start of generated content" ## Inputs and outputs ### message **message**: `undefined` \| `StreamMessage` The message to be displayed #### Defined in [projects/stream-chat-angular/src/lib/message/message.component.ts:58](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message/message.component.ts#L58) --- ### enabledMessageActions **enabledMessageActions**: `string`[] = `[]` The list of [channel capabilities](https://getstream.io/chat/docs/node/chat-permission-policies/) that are enabled for the current user, the list of [supported interactions](https://getstream.io/chat/docs/sdk/angular/concepts/message-interactions/) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](https://getstream.io/chat/docs/sdk/angular/components/MessageListComponent/) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/node/chat-permission-policies/). #### Defined in [projects/stream-chat-angular/src/lib/message/message.component.ts:62](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message/message.component.ts#L62) --- ### isLastSentMessage **isLastSentMessage**: `undefined` \| `boolean` If `true`, the message status (sending, sent, who read the message) is displayed. #### Defined in [projects/stream-chat-angular/src/lib/message/message.component.ts:66](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message/message.component.ts#L66) --- ### mode **mode**: `"main"` \| `"thread"` = `'main'` Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/). #### Defined in [projects/stream-chat-angular/src/lib/message/message.component.ts:70](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message/message.component.ts#L70) --- ### isHighlighted **isHighlighted**: `boolean` = `false` Highlighting is used to add visual emphasize to a message when jumping to the message #### Defined in [projects/stream-chat-angular/src/lib/message/message.component.ts:74](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message/message.component.ts#L74) --- ### scroll$ `Optional` **scroll$**: `Observable` An Observable that emits when the message list is scrolled, it's used to prevent opening the message menu while scroll is in progress #### Defined in [projects/stream-chat-angular/src/lib/message/message.component.ts:78](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message/message.component.ts#L78) [//]: # "End of generated content" --- This page was last updated at 2026-08-11T17:19:02.552Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/components/MessageComponent/](https://getstream.io/chat/docs/sdk/angular/components/MessageComponent/).