MessageReactionsComponent
The MessageReactions
component displays the reactions of a message, the current user can add and remove reactions. You can read more about message reactions in the platform documentation.
Example 1 - displaying reactions of a message:
![](/chat/docs/sdk/assets/images/message-reactions-screenshot-82520daecf425c2331532e3e030bd58a.png)
Example 2 - displaying the reacting users - only visible if a message has at maximum 1200 reactions:
![](/chat/docs/sdk/assets/images/reaction-details-f062a9ade5bdadcff2851e6bd75eb58d.png)
Example 3 - adding/removing a reaction:
![](/chat/docs/sdk/assets/images/message-reactions-selector-screenshot-eab71eec483401c07025cdd639eb9d9e.png)
Basic usage
A typical use case for the MessageReactions
component would be to use in your custom components that will completely override the message component.
@Component({
selector: "app-custom-message",
template: `
<stream-message-reactions
[isSelectorOpen]="isReactionSelectorOpen"
[messageId]="message.id"
[messageReactionCounts]="message.reaction_counts"
[latestReactions]="message.latest_reactions"
[ownReactions]="message.own_reactions"
></stream-message-reactions>
<!-- Other parts of the custom message component -->
`,
})
export class CustomMessageComponent {
@Input() message: StreamMessage;
isReactionSelectorOpen: boolean;
}
Customization
You can override the default reactions using the MessageReactionsService
.
You can provide your own UI for the reaction details using the MessageReactionsService
.
You can provide your own message reactions component by the CustomTemplatesService
.
Inputs and outputs
messageId
• messageId: undefined
| string
The id of the message the reactions belong to
Defined in
lib/message-reactions/message-reactions.component.ts:38
messageReactionCounts
• messageReactionCounts: Object
= {}
The number of reactions grouped by reaction types
Defined in
lib/message-reactions/message-reactions.component.ts:42
isSelectorOpen
• isSelectorOpen: boolean
= false
Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
Defined in
lib/message-reactions/message-reactions.component.ts:47
latestReactions
• latestReactions: ReactionResponse
<DefaultStreamChatGenerics
>[] = []
List of reactions of a message, used to display the users of a reaction type.
Defined in
lib/message-reactions/message-reactions.component.ts:51
ownReactions
• ownReactions: ReactionResponse
<DefaultStreamChatGenerics
>[] = []
List of the user's own reactions of a message, used to display the users of a reaction type.
Defined in
lib/message-reactions/message-reactions.component.ts:55
isSelectorOpenChange
• Readonly
isSelectorOpenChange: EventEmitter
<boolean
>
Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.