# 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](https://getstream.io/chat/docs/sdk/angular/v5/concepts/customization/) 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](https://getstream.io/chat/docs/sdk/angular/v5/concepts/generics/) 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`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) 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`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) 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`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) class) Our [generics guide](https://getstream.io/chat/docs/sdk/angular/v5/concepts/generics/) explains this topic in more details. You can find the full list of breaking changes in stream-chat [v5](https://github.com/GetStream/stream-chat-js/releases/tag/v5.0.0) and [v6](https://github.com/GetStream/stream-chat-js/releases/tag/v6.0.0) on GitHub. #### Angular 13 Run the following command to upgrade if you're using Angular 13: ```bash npm install stream-chat@6.4.0 stream-chat-angular ``` #### Angular 12 Run the following command to upgrade if you're using Angular 12: ```bash 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`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageListComponent/) | `enabledMessageActionsInput` | Use our [permission framework](https://getstream.io/chat/docs/node/chat-permission-policies/) to control what actions are available to different users | | [`MessageListComponent`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageListComponent/) | `areReactionsEnabled` | Use our [permission framework](https://getstream.io/chat/docs/node/chat-permission-policies/) to control what actions are available to different users | | [`MessageInputConfigService`](https://getstream.io/chat/docs/sdk/angular/v5/services/MessageInputConfigService/) | `acceptedFileTypes` | Use [application settings](https://getstream.io/chat/docs/node/app-setting-overview/#file-uploads) to control the accepted file types | | [`MessageInputComponent`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageInputComponent/) | `acceptedFileTypes` | Use [application settings](https://getstream.io/chat/docs/node/app-setting-overview/#file-uploads) to control the accepted file types | | [`MessageComponent`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageComponent/) | `areReactionsEnabled` | Use our [permission framework](https://getstream.io/chat/docs/node/chat-permission-policies/) 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`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageComponent/) | `canReactToMessage` | Use our [permission framework](https://getstream.io/chat/docs/node/chat-permission-policies/) 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`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageComponent/) | `canReceiveReadEvents` | Use our [permission framework](https://getstream.io/chat/docs/node/chat-permission-policies/) 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$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The autocomplete list item template for commands | `AutocompleteTextareaComponent.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | Item in the channel list | `ChannelListComponent.customChannelPreviewTemplate` | [`CustomTemplatesService.customChannelPreviewTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The message input template used when editing a message | `MessageActionsBoxComponent.messageInputTemplate` | [`CustomTemplatesService.messageInputTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The message input template used when editing a message | `MessageComponent.messageInputTemplate` | [`CustomTemplatesService.messageInputTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The template used for displaying a mention inside a message | `MessageComponent.mentionTemplate` | [`CustomTemplatesService.mentionTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The autocomplete list item template for mentioning users | `MessageInputComponent.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The autocomplete list item template for commands | `MessageInputComponent.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The template for emoji picker | `MessageInputComponent.emojiPickerTemplate$` | [`CustomTemplatesService.emojiPickerTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The template used to display a message in the message list | `MessageListComponent.messageTemplate` | [`CustomTemplatesService.messageTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The message input template used when editing a message | `MessageListComponent.messageInputTemplate` | [`CustomTemplatesService.messageInputTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The template used for displaying a mention inside a message | `MessageListComponent.mentionTemplate` | [`CustomTemplatesService.mentionTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The typing indicator template used in the message list | `MessageListComponent.typingIndicatorTemplate` | [`CustomTemplatesService.typingIndicatorTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The typing indicator template used in the message list | `MessageReactionsComponent.typingIndicatorTemplate` | [`CustomTemplatesService.typingIndicatorTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The autocomplete list item template for commands | `MessageInputConfigService.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The autocomplete list item template for mentioning users | `MessageInputConfigService.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The template for emoji picker | `MessageInputConfigService.emojiPickerTemplate` | [`CustomTemplatesService.emojiPickerTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | | The template for channel actions | `ChannelHeaderComponent.channelActionsTemplate` | [`CustomTemplatesService.channelActionsTemplate$`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/) | ## `ChatClient.notification$` renamed to `events$` The `notification$` stream on the [`ChatClientService`](https://getstream.io/chat/docs/sdk/angular/v5/services/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](https://getstream.io/chat/docs/javascript/event-object/). The payload of this Observable was renamed from `Notification` to `ClientEvent`. ## Custom action names removed Use our [permission framework](https://getstream.io/chat/docs/node/chat-permission-policies/) 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. --- This page was last updated at 2026-08-11T12:49:20.195Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/basics/upgrade-v2/](https://getstream.io/chat/docs/sdk/angular/v5/basics/upgrade-v2/).