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?