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

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:281

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:114

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:121

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:128

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:275

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:107

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:232

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:334

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:72

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:65

customAttachmentListTemplate$

customAttachmentListTemplate$: BehaviorSubject<undefined | TemplateRef<CustomAttachmentListContext<DefaultStreamChatGenerics>>>

The template used to display custom attachments in the message component

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:346

customAttachmentPreviewListTemplate$

customAttachmentPreviewListTemplate$: BehaviorSubject<undefined | TemplateRef<CustomAttachmentPreviewListContext<DefaultStreamChatGenerics>>>

The template used to display custom attachment previews in the message input component

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:340

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:239

customMessageMetadataInsideBubbleTemplate$

customMessageMetadataInsideBubbleTemplate$: BehaviorSubject<undefined | TemplateRef<CustomMetadataContext<DefaultStreamChatGenerics>>>

Template to display custom metadata inside the message bubble of the message component

To properly position your template you should override the grid-template-areas of the .str-chat__message-inner selector

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:360

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:225

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:293

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:200

emojiPickerTemplate$

emojiPickerTemplate$: BehaviorSubject<undefined | TemplateRef<EmojiPickerContext>>

The template for emoji picker

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:86

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:315

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:321

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:269

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:263

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:135

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:245

loadingIndicatorTemplate$

loadingIndicatorTemplate$: BehaviorSubject<undefined | TemplateRef<void>>

Template for displaying the loading indicator (instead of the default loading indicator)

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:142

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:59

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:79

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:156

messageActionsBoxTemplate$

messageActionsBoxTemplate$: BehaviorSubject<undefined | TemplateRef<MessageActionsBoxContext<DefaultStreamChatGenerics>>>

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:149

messageBlockedTemplate$

messageBlockedTemplate$: BehaviorSubject<undefined | TemplateRef<MessageBlockedContext>>

The template used to display blocked messages that have been removed by moderation policies instead of the default message blocked component

The template has no effect if you’re using a custom messageTemplate$

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:375

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:327

messageReactionsSelectorTemplate$

messageReactionsSelectorTemplate$: BehaviorSubject<undefined | TemplateRef<MessageReactionsSelectorContext>>

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:170

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:163

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:100

messageTextTemplate$

messageTextTemplate$: BehaviorSubject<undefined | TemplateRef<MessageTextContext>>

Template to display the text content inside the message component. The default component is stream-message-text

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:366

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:177

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:301

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:309

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:184

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:218

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:209

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:287

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:191

threadLinkButton$

threadLinkButton$: BehaviorSubject<undefined | TemplateRef<ThreadReplyButtonContext<DefaultStreamChatGenerics>>>

The template used to display the number of thread replies inside the message component

Defined in

projects/stream-chat-angular/src/lib/custom-templates.service.ts:352

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:93

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:257

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:251