# MessageReactionsSelectorComponent

The `MessageReactionsSelectorComponent` makes it possible for users to react to a message, the reaction options can be set using the [`MessageReactionsService`](https://getstream.io/chat/docs/sdk/angular/v5/services/MessageReactionsService/). You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send-reaction/) in the platform documentation.

**Example** - reacting to a message

![Message Reactions Selector Screenshot](https://getstream.io/docs-assets/images/f37df1bf5230.png)

The `MessageReactionsSelectorComponent` is displayed inside the built-in [`MessageActionsBoxComponent`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageActionsBoxComponent/).

## Basic usage

A typical use case for the `MessageReactionsSelectorComponent` would be to use in your custom components that will completely override the message component.

```typescript
@Component({
  selector: "app-custom-message",
  template: `
    <stream-message-reactions-selector
      [messageId]="message.id"
      [ownReactions]="message.own_reactions"
    ></stream-message-reactions-selector>
    <!-- Other parts of the custom message component -->
  `,
})
export class CustomMessageComponent {
  @Input() message: StreamMessage;
}
```

## Customization

You can override the default reaction options using the [`MessageReactionsService`](https://getstream.io/chat/docs/sdk/angular/v5/services/MessageReactionsService/).

You can provide your own message reaction selector component by the [`CustomTemplatesService`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/).

[//]: # "Start of generated content"

## Inputs and outputs

### ownReactions

**ownReactions**: `ReactionResponse<DefaultStreamChatGenerics>[]` = `[]`

List of the user's own reactions of a [message](https://getstream.io/chat/docs/sdk/angular/v5/types/stream-message/), used to display the users of a reaction type.

#### Defined in

[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L29)

---

### messageId

**messageId**: `undefined` \| `string`

The id of the message the reactions belong to

#### Defined in

[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L33)

[//]: # "End of generated content"


---

This page was last updated at 2026-08-11T12:49:20.666Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/components/MessageReactionsSelectorComponent/](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageReactionsSelectorComponent/).