Upgrade from v4

Highlights

stream-chat-angular@5 brings improvements in the following categories:

• New message menu and message edit UIs to improve usability
• Provide more CSS customization options for the avatar and icon components (to avoid providing a custom component for even basic customization)
• Dropping support for Angular 12-14 and theme-v1

The full list of features and progress are on GitHub.

Get started

Angular 17

npm install stream-chat-angular@beta

Angular 16

npm install stream-chat-angular@beta ngx-float-ui@16

Angular 15

npm install stream-chat-angular@beta ngx-float-ui@15 @ngx-translate/core@14

Breaking changes

Angular version support

Angular versions 12-14 are no longer supported. You can use the Angular update guide to update your application.

Theme v1 is removed

Theme-v1 was deprecated in version 4. Most customers already use theme-v2 which used to be imported from this path:

@import "stream-chat-angular/src/assets/styles/v2/scss/index.scss";

From version 5 this path should be used:

@import "stream-chat-angular/src/assets/styles/scss/index.scss";

// or if you're using CSS
@import "stream-chat-angular/src/assets/styles/css/index.css";

No futher action is required for customers who were already using theme-v2.

Customers who used to use theme-v1 now need to use theme-v2. Updating from theme-v1 to theme-v2 will require to rewrite your custom CSS code as the new theme has a new variable system, and all the components were restructured. To help you get started please refer our theming guide.

Removed deprecated features

MessageListComponent

• No longer accepts the customMessageActions input. You can use the MessageActionsService for configuring custom message actions.

Go to documentation

MessageComponent

• No longer accepts the customActions input. You can use the MessageActionsService for configuring custom message actions.

Go to documentation

MessageActionsBoxComponent

• No longer accepts the isOpen input. The Message component will take care of hiding/showing the action box component.
• The customActions input has been removed. You can use the MessageActionsService for configuring custom message actions.
• The displayedActionsCount output has been removed. Moving forward the MessageActionsService will be able to provide this information.
• The isEditing output has been removed. Moving forward the MessageActionsService will be able to provide this information.

Go to documentation

messageActionsBoxTemplate$

• No longer accepts the isOpen input. The Message component will take care of hiding/showing the action box component.
• The customActions input has been removed. You can use the MessageActionsService for configuring custom message actions.
• The displayedActionsCountChangeHandler input has been removed. Moving forward the MessageActionsService will be able to provide this information.

Go to documentation

ImageLoadService

The ImageLoadService is now removed. It's no longer required since the SDK uses a more advanced image sizing method.

ChannelListToggleService

The ChannelListToggleService is now removed as it was only used in theme-v1. For theme-v2 please refer to the responsive layout guide.

Channel query error handling

In previous versions if an error occured during channel load, the channelService.channels$ Observable emitted an error, which would close the stream. Users would have to reload the page to be able to reinitialize the ChannelService. This isn't a sensible default behavior. From version 5 the channels$ Observable will never emit an error, the channel query result can be observed using the channelService.channelQueryState$. With this change the options.keepAliveChannels$OnError is no longer necessary, and has been removed.

Type changes

• Event handlers with Function type are changed to () => void
• Event handlers with any return types are changed to void return type

Default reactions

To better align with other SDKs, the default reaction has been changed: the angry reaction is removed. You can provide your own reaction set using the MessageReactionsService

Component customization

Avatar

To allow better customization for avatar, the size input has been removed, and was replaced with the --str-chat__avatar-size CSS variable.

With this change the size input is no longer supported on the AvatarPlaceholderComponent, AvatarComponent, and the avatarTemplate$.

Icon

In previous versions it was hard to customize icon size and color from CSS, and using custom icons required overriding the built-in icon component. To solve these issues stream-chat-angular@5 introduces a better customization system for icons.

Please refer to the theming guide that explains how to customize icons.

With this change the size input is no longer necessary and has been removed from the the IconPlaceholderComponent, IconComponent, and the iconTemplate$.

The icon names have also been consolidated, so if you're using a custom icon component, you need to update it accordingly:

Previous name	Change
action-icon	Renamed to action
delivered-icon	Renamed to delivered
read-icon	Renamed to read
reaction-icon	Renamed to reaction
connection-error	Removed, it was only used in theme-v1
send	Unchanged
file-upload	Removed, it was only used in theme-v1
retry	Unchanged
close	Unchanged
file	Removed, it was only used in theme-v1
audio-file	Unchanged
reply	Removed, it was only used in theme-v1
close-no-outline	Removed, use close instead
reply-in-thread	Unchanged
arrow-left	Unchanged
arrow-right	Unchanged
menu	Removed, it was only used in theme-v1
arrow-up	Unchanged
arrow-down	Unchanged
chat-bubble	Unchanged
attach	Unchanged
unspecified-filetype	Unchanged
download	Unchanged
error	Unchanged
play	Unchanged
pause	Unchanged

Loading indicator

To allow better customization for loading indicator, the size input has been removed, and was replaced with the --str-chat__loading-indicator-size CSS variable.

With this change the size input is no longer supported on the LoadingIndicatorPlaceholderComponent, LoadingIndicatorComponent, and the loadingIndicatorTemplate$. The loadingIndicatorTemplate$ now accepts TemplateRef<void> instead of TemplateRef<LoadingIndicatorContext>

Other changes

Unused packages

The ngx-popperjs package has been deprecated, so you can remove the related packages from your package.json file:

• @popperjs/core
• ngx-popperjs