This is documentation for Stream Chat Angular SDK v4, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v5).

Upgrade from v2

About v3

This version’s main focus was to enhance the customizability of the SDK, the two main features are:

there are many new customization points where you can provide your own template to override the default UI - our customization guide covers this topic in detail
you can take advantage of TypeScript generics to define custom fields for messages, message reactions, attachments, commands, channels or events - our generics guide explain this topic in more details

Below you can find the list of breaking changes and instructions on how to update your code.

Peer dependencies

stream-chat

Upgrade to stream-chat ^6.4.0.

You might need to update your code if you created custom components/services that used stream-chat in your application.

The biggest change is that generic parameters were refactored into a single generic parameter, this has two major implications:

If you used generic parameters for handling messages, message reactions, attachments, commands, channels or events you have to change those generic parameters, the SDK uses the DefaultStreamChatGenerics parameter instead of the individual DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType DefaultMessageType, DefaultReactionType and DefaultUserType parameters.
If you are interacting with the ChannelService or ChatClientService you’ll have to provide the DefaultStreamChatGenerics parameter (or a descended) for message reactions, attachments, commands, channels or events (you don’t need to provide it for messages as it’s already part of the StreamMessage class)

Our generics guide explains this topic in more details.

You can find the full list of breaking changes in stream-chat v5 and v6 on GitHub.

Angular 13

Run the following command to upgrade if you’re using Angular 13:

npm install stream-chat@6.4.0 stream-chat-angular

Angular 12

Run the following command to upgrade if you’re using Angular 12:

npm install stream-chat@6.4.0 stream-chat-angular@3 --legacy-peer-deps

stream-chat-css

You can drop the @stream-io/stream-chat-css dependency because going forward stream-chat-angular will encapsulate the library.

Rewrite your stylesheet imports to this:

~stream-chat-angular/src/assets/styles/scss/index.scss

Or this if you were using CSS:

~stream-chat-angular/src/assets/styles/css/index.css

It’s still possible to individually import stylesheets you just have to replace the ~@stream-io/stream-chat-css/dist prefix with ~stream-chat-angular/src/assets/styles.

Inputs removed in favor of channel capabilities

The following inputs are removed:

Component/service	Input name	Replacement
`MessageListComponent`	`enabledMessageActionsInput`	Use our permission framework to control what actions are available to different users
`MessageListComponent`	`areReactionsEnabled`	Use our permission framework to control what actions are available to different users
`MessageInputConfigService`	`acceptedFileTypes`	Use application settings to control the accepted file types
`MessageInputComponent`	`acceptedFileTypes`	Use application settings to control the accepted file types
`MessageComponent`	`areReactionsEnabled`	Use our permission framework to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled.
`MessageComponent`	`canReactToMessage`	Use our permission framework to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled.
`MessageComponent`	`canReceiveReadEvents`	Use our permission framework to control what actions are available to different users

Centralized customizations

Description	Old option	New option
The autocomplete list item template for mentioning users	`AutocompleteTextareaComponent.mentionAutocompleteItemTemplate`	`CustomTemplatesService.mentionAutocompleteItemTemplate$`
The autocomplete list item template for commands	`AutocompleteTextareaComponent.commandAutocompleteItemTemplate`	`CustomTemplatesService.commandAutocompleteItemTemplate$`
Item in the channel list	`ChannelListComponent.customChannelPreviewTemplate`	`CustomTemplatesService.customChannelPreviewTemplate$`
The message input template used when editing a message	`MessageActionsBoxComponent.messageInputTemplate`	`CustomTemplatesService.messageInputTemplate$`
The message input template used when editing a message	`MessageComponent.messageInputTemplate`	`CustomTemplatesService.messageInputTemplate$`
The template used for displaying a mention inside a message	`MessageComponent.mentionTemplate`	`CustomTemplatesService.mentionTemplate$`
The autocomplete list item template for mentioning users	`MessageInputComponent.mentionAutocompleteItemTemplate`	`CustomTemplatesService.mentionAutocompleteItemTemplate$`
The autocomplete list item template for commands	`MessageInputComponent.commandAutocompleteItemTemplate`	`CustomTemplatesService.commandAutocompleteItemTemplate$`
The template for emoji picker	`MessageInputComponent.emojiPickerTemplate$`	`CustomTemplatesService.emojiPickerTemplate$`
The template used to display a message in the message list	`MessageListComponent.messageTemplate`	`CustomTemplatesService.messageTemplate$`
The message input template used when editing a message	`MessageListComponent.messageInputTemplate`	`CustomTemplatesService.messageInputTemplate$`
The template used for displaying a mention inside a message	`MessageListComponent.mentionTemplate`	`CustomTemplatesService.mentionTemplate$`
The typing indicator template used in the message list	`MessageListComponent.typingIndicatorTemplate`	`CustomTemplatesService.typingIndicatorTemplate$`
The typing indicator template used in the message list	`MessageReactionsComponent.typingIndicatorTemplate`	`CustomTemplatesService.typingIndicatorTemplate$`
The autocomplete list item template for commands	`MessageInputConfigService.commandAutocompleteItemTemplate`	`CustomTemplatesService.commandAutocompleteItemTemplate$`
The autocomplete list item template for mentioning users	`MessageInputConfigService.mentionAutocompleteItemTemplate`	`CustomTemplatesService.mentionAutocompleteItemTemplate$`
The template for emoji picker	`MessageInputConfigService.emojiPickerTemplate`	`CustomTemplatesService.emojiPickerTemplate$`
The template for channel actions	`ChannelHeaderComponent.channelActionsTemplate`	`CustomTemplatesService.channelActionsTemplate$`

`ChatClient.notification$` renamed to `events$`

The notification$ stream on the ChatClientService was renamed to events$ as it better represents what this Observable does.

The events$ stream emits the received client, notification and user presence events.

The payload of this Observable was renamed from Notification to ClientEvent.

Custom action names removed

Use our permission framework to control the authorization of the following message actions:

Custom action name	Channel capability	Comment
`quote`	`quote-message`
`pin`	`pin-message`	Currently turned off because not implemented
`flag`	`flag-message`
`edit`	`update-own-message`
`edit-any`	`update-any-message`

The mute action is removed.

Overview

Upgrade from v3