# MessageReactionsComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

The `MessageReactions` component displays the reactions of a message. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send-reaction/) in the platform documentation.

**Example 1** - displaying reactions of a message:

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

**Example 2** - displaying the reacting users (loaded page by page using [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/v8/services/MessageReactionsService/#queryreactions)):

![Reaction Details](https://getstream.io/docs-assets/images/c75e075fd4ba.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.

```typescript
@Component({
  selector: "app-custom-message",
  template: `
    <stream-message-reactions
      [messageId]="message.id"
      [messageReactionGroups]="message.reaction_groups"
      [ownReactions]="message.own_reactions"
    ></stream-message-reactions>
    <!-- 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/v8/services/MessageReactionsService/).

You can provide your own UI for the reaction details using the [`MessageReactionsService`](https://getstream.io/chat/docs/sdk/angular/v8/services/MessageReactionsService/).

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

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

## 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](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L38)

---

### messageReactionGroups

**messageReactionGroups**: `undefined` \| `{ [key: string]: ReactionGroupResponse; }` = `undefined`

The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)

#### Defined in

[lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42)

---

### messageReactionCounts

**messageReactionCounts**: `Object` = `{}`

The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)

**`Deprecated`**

use `messageReactionGroups`

#### Defined in

[lib/message-reactions/message-reactions.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L49)

---

### latestReactions

**latestReactions**: `ReactionResponse`[] = `[]`

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

**`Deprecated`**

you can fetch the reactions using [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/v8/services/MessageReactionsService/#queryreactions)

#### Defined in

[lib/message-reactions/message-reactions.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L55)

---

### ownReactions

**ownReactions**: `ReactionResponse`[] = `[]`

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

#### Defined in

[lib/message-reactions/message-reactions.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L59)

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

---

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