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 actionsThe 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 streamThe 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 UIOnce 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 messageLet'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 messageLet'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>