Pin messages

Pinning messages can be a useful feature inside your chat application, stream-chat-angular supports this feature, but you have to provide the UI template for the pinned messages. This guide shows you how you can set up this functionality.

Pin and unpin actions

The default message action box contains the pin/unpin action, this action marks a message as pinned/unpinned.

note

If you don't see the action, you might have authorize the pin action.

Pinned messages stream

The activeChannelPinnedMessages$ stream of the ChannelService emits the list of currently pinned messages inside the active channel.

this.channelService.activeChannelPinnedMessages$.subscribe(console.log);

• The initial value is retrieved from the channel query response
• After that, all pin and unpin actions are reflected in the emitted list

Pinned messages UI

Once we know the list of pinned messages, we should display them somewhere users can easily spot them. You can display pinned messages anywhere you want to, however a common place could be the top/bottom of the message list, this example will display pinned messages at the bottom of the message list.

You have to provide the template for the pinned messages:

<stream-notification-list></stream-notification-list>
<div
  style="padding: 8px; background: #e1f5fe"
  *ngFor="
          let message of channelService.activeChannelPinnedMessages$ | async
        "
>
  {{ message.text }}
</div>
<stream-message-input></stream-message-input>

The message variable has StreamMessage type, so you can access all fields defined there inside your template.

Jump to a pinned message

Let's add a click event handler to the pinned message, and jump to the message (works for channel and thread messages as well):

jumpToMessage(message: StreamMessage) {
  this.channelService.jumpToMessage(message.id, message.parent_id);
}

<div
  style="padding: 8px; background: #e1f5fe"
  *ngFor="
          let message of channelService.activeChannelPinnedMessages$ | async
        "
  (click)="jumpToMessage(message)"
>
  {{ message.text }}
</div>

Unpin message

Let's extend our example and add an Unpin button to remove the pin from a message.

unpinMessage(message: StreamMessage<DefaultStreamChatGenerics>) {
  this.channelService.unpinMessage(message);
}

<div
  style="padding: 8px; background: #e1f5fe"
  *ngFor="
        let message of channelService.activeChannelPinnedMessages$ | async
      "
  (click)="jumpToMessage(message)"
>
  {{ message.text }}
  <button
    style="border: none; background: none; padding: 0; margin: 0"
    (click)="$event.stopPropagation(); unpinMessage(message)"
  >
    Unpin
  </button>
</div>