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).

Example 1 - example message:

Example 2 - message with reactions:

Example 3 - message actions:

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. It’s also possible to just override parts of the message component.

The Message component uses the DateParserService to create user-friendly dates, you can override the date-parsing methods with your own functions.

The MessageService has additional customization options.

If you want to build your own Message component, you might find the following building blocks useful:

Defined in

projects/stream-chat-angular/src/lib/message/message.component.ts:65

enabledMessageActions

enabledMessageActions: string[] = []

The list of channel capabilities that are enabled for the current user, the list of supported interactions can be found in our message interaction guide. Unathorized actions won’t be displayed on the UI. The MessageList component automatically sets this based on channel capabilities.