# 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)](/chat/docs/sdk/angular/v4/concepts/message-interactions/). **Example 1** - example message: ![Message Screenshot](/data/docs/chat-sdk/angular/v4/_assets/message-screenshot.png) **Example 2** - message with reactions: ![Message Reactions Screenshot](/data/docs/chat-sdk/angular/v4/_assets/message-reactions-screenshot.png) **Example 3** - message actions: ![Message Actions Screenshot](/data/docs/chat-sdk/angular/v4/_assets/message-actions-screenshot.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`](/chat/docs/sdk/angular/v4/services/CustomTemplatesService#messagetemplate/). It's also possible to just override parts of the message component. The `Message` component uses the [`DateParserService`](/chat/docs/sdk/angular/v4/services/DateParserService/) to create user-friendly dates, you can override the date-parsing methods with your own functions. The [`MessageService`](/chat/docs/sdk/angular/v4/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`](/chat/docs/sdk/angular/v4/components/AvatarComponent/) component to display the sender's photo. ### Message actions The `Message` component uses the [`MessageActionsBox`](/chat/docs/sdk/angular/v4/components/MessageActionsBoxComponent/) component to enable interaction with the message (edit). ### Message reactions The `Message` component uses the [`MessageReactions`](/chat/docs/sdk/angular/v4/components/MessageReactionsComponent/) component to display reactions of a message, and enable reacting to a message. ### Attachments The `Message` component uses the [`AttachmentList`](/chat/docs/sdk/angular/v4/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`](/chat/docs/sdk/angular/v4/components/LoadingIndicatorComponent/) component to display a spinner while the message is being sent. ### Icons The `Message` component uses the [`Icon`](/chat/docs/sdk/angular/v4/components/IconComponent/) component to display icons. ## Mention template You can add interactions to mentions inside a message, follow our [mention actions guide](/chat/docs/sdk/angular/v4/code-examples/mention-actions/) to get to know more. [//]: # "Start of generated content" ## Inputs and outputs ### message • **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> The message to be displayed #### Defined in [lib/message/message.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L67) --- ### enabledMessageActions • **enabledMessageActions**: `string`[] = `[]` The list of [channel capabilities](/chat/docs/javascript/chat_permission_policies/) that are enabled for the current user, the list of [supported interactions](/chat/docs/sdk/angular/v4/concepts/message-interactions/) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](/chat/docs/sdk/angular/v4/components/MessageListComponent/) component automatically sets this based on [channel capabilities](/chat/docs/javascript/chat_permission_policies/). #### Defined in [lib/message/message.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L71) --- ### isLastSentMessage • **isLastSentMessage**: `undefined` \| `boolean` If `true`, the message status (sending, sent, who read the message) is displayed. #### Defined in [lib/message/message.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L75) --- ### mode • **mode**: `"thread"` \| `"main"` = `'main'` Determines if the message is being dispalyed in a channel or in a [thread](/chat/docs/javascript/threads/). #### Defined in [lib/message/message.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L79) --- ### isHighlighted • **isHighlighted**: `boolean` = `false` Highlighting is used to add visual emphasize to a message when jumping to the message #### Defined in [lib/message/message.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L83) --- ### customActions • **customActions**: `CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[] = `[]` A list of custom message actions to be displayed in the action box **`deprecated`** please use the [`MessageActionsService`](/chat/docs/sdk/angular/services/MessageActionsService/) to set this property. #### Defined in [lib/message/message.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L89) [//]: # "End of generated content" --- This page was last updated at 2026-03-13T13:12:49.486Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v4/components/MessageComponent/](https://getstream.io/chat/docs/sdk/angular/v4/components/MessageComponent/).