CustomTemplatesService
A central location for registering your custom templates to override parts of the chat application.
For code examples to the different customizations see our customizations example application, specifically the AppComponent (see README for instructions on how to start the application).
You can find the type definitions of the context that is provided for each template on GitHub
Type parameters
| Name | Type |
|---|---|
T | extends DefaultStreamChatGenerics = DefaultStreamChatGenerics |
Properties
attachmentActionsTemplate$
• attachmentActionsTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentContext>>
The template that can be used to override how attachment actions are displayed inside the attachment list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:277
attachmentListTemplate$
• attachmentListTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentListContext>>
The template used to display attachments of a message (instead of the default attachment list)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:117
attachmentPreviewListTemplate$
• attachmentPreviewListTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentPreviewListContext>>
The template used to display attachments in the message input component (instead of the default attachment preview)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:124
avatarTemplate$
• avatarTemplate$: BehaviorSubject\<undefined | TemplateRef\<AvatarContext>>
The template used to display avatars for channels and users (instead of the default avatar)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:131
cardAttachmentTemplate$
• cardAttachmentTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentContext>>
The template that can be used to override how a card attachment is displayed inside the attachment list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:271
channelActionsTemplate$
• channelActionsTemplate$: BehaviorSubject\<undefined | TemplateRef\<ChannelActionsContext\<DefaultStreamChatGenerics>>>
The template for channel actions displayed in the channel header (by default no channel action is displayed)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:110
channelHeaderInfoTemplate$
• channelHeaderInfoTemplate$: BehaviorSubject\<undefined | TemplateRef\<ChannelHeaderInfoContext\<DefaultStreamChatGenerics>>>
The template used to display additional information about a channel under the channel name inside the channel header component
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:228
channelPreviewInfoTemplate$
• channelPreviewInfoTemplate$: BehaviorSubject\<undefined | TemplateRef\<ChannelPreviewInfoContext\<DefaultStreamChatGenerics>>>
Template used to display the channel information inside the channel list item
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:336
channelPreviewTemplate$
• channelPreviewTemplate$: BehaviorSubject\<undefined | TemplateRef\<ChannelPreviewContext\<DefaultStreamChatGenerics>>>
Template used to display an item in the channel list (instead of the default channal list item)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:68
commandAutocompleteItemTemplate$
• commandAutocompleteItemTemplate$: BehaviorSubject\<undefined | TemplateRef\<CommandAutocompleteListItemContext>>
The autocomplete list item template for commands (used in the AutocompleteTextareaComponent)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:61
customAttachmentUploadTemplate$
• customAttachmentUploadTemplate$: BehaviorSubject\<undefined | TemplateRef\<CustomAttachmentUploadContext>>
The template used for displaying file upload/attachment selector inside the message input
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:235
customMessageMetadataTemplate$
• customMessageMetadataTemplate$: BehaviorSubject\<undefined | TemplateRef\<CustomMetadataContext\<T>>>
Template to display custom metadata inside message component
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:221
dateSeparatorTemplate$
• dateSeparatorTemplate$: BehaviorSubject\<undefined | TemplateRef\<DateSeparatorContext>>
The template used to display the date separator inside the message list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:289
deliveredStatusTemplate$
• deliveredStatusTemplate$: BehaviorSubject\<undefined | TemplateRef\<DeliveredStatusContext>>
The template used for displaying the delivered state of the message inside the message component
Displayed for the last message sent by the current user, if the message isn't yet read by anyone
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:196
editMessageFormTemplate$
• editMessageFormTemplate$: BehaviorSubject\<undefined | TemplateRef\<void>>
The template used to display the edit message form
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:323
emojiPickerTemplate$
• emojiPickerTemplate$: BehaviorSubject\<undefined | TemplateRef\<EmojiPickerContext>>
The template for emoji picker
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:89
emptyMainMessageListPlaceholder$
• emptyMainMessageListPlaceholder$: BehaviorSubject\<undefined | TemplateRef\<void>>
The template to show if the main message list is empty
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:311
emptyThreadMessageListPlaceholder$
• emptyThreadMessageListPlaceholder$: BehaviorSubject\<undefined | TemplateRef\<void>>
The template to show if the thread message list is empty
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:317
fileAttachmentTemplate$
• fileAttachmentTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentContext>>
The template that can be used to override how a file attachment is displayed inside the attachment list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:265
galleryAttachmentTemplate$
• galleryAttachmentTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentContext>>
The template that can be used to override how image gallery is displayed inside the attachment list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:259
iconTemplate$
• iconTemplate$: BehaviorSubject\<undefined | TemplateRef\<IconContext>>
Template for displaying icons (instead of the default icon component)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:138
imageAttachmentTemplate$
• imageAttachmentTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentContext>>
The template that can be used to override how a single image attachment is displayed inside the attachment list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:241
loadingIndicatorTemplate$
• loadingIndicatorTemplate$: BehaviorSubject\<undefined | TemplateRef\<LoadingIndicatorContext>>
Template for displaying the loading indicator (instead of the default loading indicator)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:145
mentionAutocompleteItemTemplate$
• mentionAutocompleteItemTemplate$: BehaviorSubject\<undefined | TemplateRef\<MentionAutcompleteListItemContext>>
The autocomplete list item template for mentioning users (used in the AutocompleteTextareaComponent)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:55
mentionTemplate$
• mentionTemplate$: BehaviorSubject\<undefined | TemplateRef\<MentionTemplateContext>>
The template used for displaying a mention inside a message
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:82
messageActionsBoxItemTemplate$
• messageActionsBoxItemTemplate$: BehaviorSubject\<undefined | TemplateRef\<MessageActionBoxItemContext\<DefaultStreamChatGenerics>>>
The template used for displaying an item in the message actions box
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:159
messageActionsBoxTemplate$
• messageActionsBoxTemplate$: BehaviorSubject\<undefined | TemplateRef\<MessageActionsBoxContext>>
Template for displaying the message actions box (instead of the default message actions box)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:152
messageBouncePromptTemplate$
• messageBouncePromptTemplate$: BehaviorSubject\<undefined | TemplateRef\<void>>
The template used to display the message bounce prompt
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:329
messageInputTemplate$
• messageInputTemplate$: BehaviorSubject\<undefined | TemplateRef\<MessageInputContext>>
The message input template used when editing a message (instead of the default message input)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:75
messageReactionsTemplate$
• messageReactionsTemplate$: BehaviorSubject\<undefined | TemplateRef\<MessageReactionsContext>>
The template used to display the reactions of a message, and the selector to add a reaction to a message (instead of the default message reactions component)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:166
messageTemplate$
• messageTemplate$: BehaviorSubject\<undefined | TemplateRef\<MessageContext>>
The template used to display a message in the message list (instead of the default message component)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:103
modalTemplate$
• modalTemplate$: BehaviorSubject\<undefined | TemplateRef\<ModalContext>>
The template used to display a modal window (instead of the default modal)
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:173
newMessagesIndicatorTemplate$
• newMessagesIndicatorTemplate$: BehaviorSubject\<undefined | TemplateRef\<UnreadMessagesIndicatorContext>>
The template used to display unread messages indicator inside the message list when the channel is opened
This UI element is used to separate unread messages from read messages
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:297
newMessagesNotificationTemplate$
• newMessagesNotificationTemplate$: BehaviorSubject\<undefined | TemplateRef\<UnreadMessagesNotificationContext>>
The template used to display unread messages notification inside the message list when the channel is opened
Users can use this notification to jump to the first unread message when it's clicked
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:305
notificationTemplate$
• notificationTemplate$: BehaviorSubject\<undefined | TemplateRef\<NotificationContext>>
The template used to override the default notification component
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:180
readStatusTemplate$
• readStatusTemplate$: BehaviorSubject\<undefined | TemplateRef\<ReadStatusContext>>
The template used for displaying the sent state of the message inside the message component
Displayed for the last message sent by the current user, if the message is read at least by one user
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:214
sendingStatusTemplate$
• sendingStatusTemplate$: BehaviorSubject\<undefined | TemplateRef\<SendingStatusContext>>
The template used for displaying the sending state of the message inside the message component
Displayed for the last message sent by the current user, if the message is currently being sent
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:205
systemMessageTemplate$
• systemMessageTemplate$: BehaviorSubject\<undefined | TemplateRef\<SystemMessageContext>>
The template used to display system messages indise the message component
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:283
threadHeaderTemplate$
• threadHeaderTemplate$: BehaviorSubject\<undefined | TemplateRef\<ThreadHeaderContext>>
The template used for header of a thread
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:187
typingIndicatorTemplate$
• typingIndicatorTemplate$: BehaviorSubject\<undefined | TemplateRef\<TypingIndicatorContext>>
The typing indicator template used in the message list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:96
videoAttachmentTemplate$
• videoAttachmentTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentContext>>
The template that can be used to override how a video attachment is displayed inside the attachment list
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:253
voiceRecordingAttachmentTemplate$
• voiceRecordingAttachmentTemplate$: BehaviorSubject\<undefined | TemplateRef\<AttachmentContext>>
The template that can be used to override how a voice recording attachment is displayed inside the attachment list, by default the voice recording component is used
Defined in
projects/stream-chat-angular/src/lib/custom-templates.service.ts:247