Skip to main content

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:

Example 2 - adding/removing a reaction:

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 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:31


messageReactionCounts#

messageReactionCounts: Object = {}

The number of reactions grouped by reaction types

Defined in#

lib/message-reactions/message-reactions.component.ts:35


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:40


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:44


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:48


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.

Defined in#

lib/message-reactions/message-reactions.component.ts:52

Did you find this page helpful?