Merge pull request #478 from GetStream/custom-template-change-detection-bug

fix: some custom templates not properly updated

Author: szuperaz

projects/stream-chat-angular/src/lib/message/message.component.html

@@ -82,7 +82,7 @@
               </ng-template>
               <ng-container
                 *ngTemplateOutlet="
-                  (messageActionsBoxTemplate$ | async) ||
+                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||
                     defaultMessageActionsBox;
                   context: getMessageActionsBoxContext()
                 "
@@ -159,7 +159,8 @@
           </ng-template>
           <ng-container
             *ngTemplateOutlet="
-              (messageReactionsTemplate$ | async) || defaultMessageReactions;
+              (customTemplatesService.messageReactionsTemplate$ | async) ||
+                defaultMessageReactions;
               context: getMessageReactionsContext()
             "
           ></ng-container>
@@ -250,7 +251,8 @@
                       </ng-template>
                       <ng-container
                         *ngTemplateOutlet="
-                          (mentionTemplate$ | async) || defaultMention;
+                          (customTemplatesService.mentionTemplate$ | async) ||
+                            defaultMention;
                           context: getMentionContext(part)
                         "
                       ></ng-container>
@@ -307,7 +309,8 @@
 <ng-template #systemMessage>
   <ng-container
     *ngTemplateOutlet="
-      (systemMessageTemplate$ | async) || defaultSystemMessage;
+      (customTemplatesService.systemMessageTemplate$ | async) ||
+        defaultSystemMessage;
       context: getMessageContext()
     "
   ></ng-container>
@@ -379,7 +382,8 @@
         </ng-template>
         <ng-container
           *ngTemplateOutlet="
-            (attachmentListTemplate$ | async) || defaultAttachments;
+            (customTemplatesService.attachmentListTemplate$ | async) ||
+              defaultAttachments;
             context: getQuotedMessageAttachmentListContext()
           "
         ></ng-container>
@@ -476,7 +480,8 @@
     <ng-template #deliveredStatus>
       <ng-container
         *ngTemplateOutlet="
-          (deliveredStatusTemplate$ | async) || defaultDeliveredStatus;
+          (customTemplatesService.deliveredStatusTemplate$ | async) ||
+            defaultDeliveredStatus;
           context: getDeliveredStatusContext()
         "
       ></ng-container>
@@ -512,7 +517,8 @@
     <ng-template #sendingStatus>
       <ng-container
         *ngTemplateOutlet="
-          (sendingStatusTemplate$ | async) || defaultSendingStatus;
+          (customTemplatesService.sendingStatusTemplate$ | async) ||
+            defaultSendingStatus;
           context: getSendingStatusContext()
         "
       ></ng-container>
@@ -546,7 +552,8 @@
     <ng-template #readStatus>
       <ng-container
         *ngTemplateOutlet="
-          (readStatusTemplate$ | async) || defaultReadStatus;
+          (customTemplatesService.readStatusTemplate$ | async) ||
+            defaultReadStatus;
           context: getReadStatusContext()
         "
       ></ng-container>
@@ -642,7 +649,8 @@
   </ng-template>
   <ng-container
     *ngTemplateOutlet="
-      (attachmentListTemplate$ | async) || defaultAttachments;
+      (customTemplatesService.attachmentListTemplate$ | async) ||
+        defaultAttachments;
       context: getAttachmentListContext()
     "
   ></ng-container>

projects/stream-chat-angular/src/lib/message/message.component.ts

@@ -2,7 +2,6 @@ import {
   Component,
   ElementRef,
   Input,
-  TemplateRef,
   OnChanges,
   SimpleChanges,
   ViewChild,
@@ -28,7 +27,7 @@ import {
   SystemMessageContext,
 } from '../types';
 import emojiRegex from 'emoji-regex';
-import { Observable, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { listUsers } from '../list-users';
 import { ThemeService } from '../theme.service';
@@ -83,28 +82,6 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
   isReactionSelectorOpen = false;
   visibleMessageActionsCount = 0;
   messageTextParts: MessagePart[] = [];
-  mentionTemplate$?: Observable<
-    TemplateRef<MentionTemplateContext> | undefined
-  >;
-  deliveredStatusTemplate$?: Observable<
-    TemplateRef<DeliveredStatusContext> | undefined
-  >;
-  sendingStatusTemplate$?: Observable<
-    TemplateRef<SendingStatusContext> | undefined
-  >;
-  readStatusTemplate$?: Observable<TemplateRef<ReadStatusContext> | undefined>;
-  attachmentListTemplate$?: Observable<
-    TemplateRef<AttachmentListContext> | undefined
-  >;
-  messageActionsBoxTemplate$?: Observable<
-    TemplateRef<MessageActionsBoxContext> | undefined
-  >;
-  messageReactionsTemplate$?: Observable<
-    TemplateRef<MessageReactionsContext> | undefined
-  >;
-  systemMessageTemplate$?: Observable<
-    TemplateRef<SystemMessageContext> | undefined
-  >;
   popperTriggerClick = NgxPopperjsTriggers.click;
   popperTriggerHover = NgxPopperjsTriggers.hover;
   popperPlacementAuto = NgxPopperjsPlacements.AUTO;
@@ -136,7 +113,7 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
   constructor(
     private chatClientService: ChatClientService,
     private channelService: ChannelService,
-    private customTemplatesService: CustomTemplatesService,
+    public customTemplatesService: CustomTemplatesService,
     private cdRef: ChangeDetectorRef,
     themeService: ThemeService,
     private dateParser: DateParserService
@@ -155,20 +132,6 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
         }
       })
     );
-    this.mentionTemplate$ = this.customTemplatesService.mentionTemplate$;
-    this.attachmentListTemplate$ =
-      this.customTemplatesService.attachmentListTemplate$;
-    this.messageActionsBoxTemplate$ =
-      this.customTemplatesService.messageActionsBoxTemplate$;
-    this.messageReactionsTemplate$ =
-      this.customTemplatesService.messageReactionsTemplate$;
-    this.deliveredStatusTemplate$ =
-      this.customTemplatesService.deliveredStatusTemplate$;
-    this.sendingStatusTemplate$ =
-      this.customTemplatesService.sendingStatusTemplate$;
-    this.readStatusTemplate$ = this.customTemplatesService.readStatusTemplate$;
-    this.systemMessageTemplate$ =
-      this.customTemplatesService.systemMessageTemplate$;
   }
 
   ngOnChanges(changes: SimpleChanges): void {