fix: angular change detection errors

Author: szuperaz

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html

@@ -1,4 +1,7 @@
-<div *ngIf="orderedAttachments.length > 0" class="str-chat__attachment-list">
+<div
+  *ngIf="isInited && orderedAttachments.length > 0"
+  class="str-chat__attachment-list"
+>
   <ng-container
     *ngFor="let attachment of orderedAttachments; trackBy: trackByUrl"
   >

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts

@@ -1,4 +1,6 @@
 import {
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   HostBinding,
@@ -33,7 +35,7 @@ import { ThemeService } from '../theme.service';
   templateUrl: './attachment-list.component.html',
   styles: [],
 })
-export class AttachmentListComponent implements OnChanges {
+export class AttachmentListComponent implements OnChanges, AfterViewInit {
   /**
    * The id of the message the attachments belong to
    */
@@ -56,6 +58,7 @@ export class AttachmentListComponent implements OnChanges {
   orderedAttachments: Attachment<DefaultStreamChatGenerics>[] = [];
   imagesToView: Attachment<DefaultStreamChatGenerics>[] = [];
   imagesToViewCurrentIndex = 0;
+  isInited = false;
   themeVersion: '1' | '2';
   @ViewChild('modalContent', { static: true })
   private modalContent!: TemplateRef<void>;
@@ -70,11 +73,11 @@ export class AttachmentListComponent implements OnChanges {
     public readonly customTemplatesService: CustomTemplatesService,
     private channelService: ChannelService,
     private attachmentConfigurationService: AttachmentConfigurationService,
+    private cdRef: ChangeDetectorRef,
     themeService: ThemeService
   ) {
     this.themeVersion = themeService.themeVersion;
   }
-
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.attachments) {
       const images = this.attachments.filter(this.isImage);
@@ -95,6 +98,11 @@ export class AttachmentListComponent implements OnChanges {
     }
   }
 
+  ngAfterViewInit(): void {
+    this.isInited = true;
+    this.cdRef.detectChanges();
+  }
+
   trackByUrl(_: number, attachment: Attachment) {
     return (
       attachment.image_url ||

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

@@ -144,6 +144,11 @@ export class MessageListComponent
     private ngZone: NgZone,
     private cdRef: ChangeDetectorRef
   ) {
+    this.usersTypingInChannel$ = this.channelService.usersTypingInChannel$;
+    this.usersTypingInThread$ = this.channelService.usersTypingInThread$;
+  }
+
+  ngOnInit(): void {
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
         this.chatClientService.chatClient?.logger?.(
@@ -243,11 +248,6 @@ export class MessageListComponent
         }
       )
     );
-    this.usersTypingInChannel$ = this.channelService.usersTypingInChannel$;
-    this.usersTypingInThread$ = this.channelService.usersTypingInThread$;
-  }
-
-  ngOnInit(): void {
     this.setMessages$();
   }