example: empty message placeholder

Author: szuperaz

projects/customizations-example/src/app/app.component.html

@@ -282,3 +282,11 @@
 <ng-template #dateSeparator let-date="date" let-parsedDate="parsedDate">
   {{ date }} - {{ parsedDate }}
 </ng-template>
+
+<ng-template #emptyMainMessageList>
+  <div class="empty-list"><div>No messages yet</div></div>
+</ng-template>
+
+<ng-template #emptyThreadMessageList>
+  <div class="empty-list"><div>No thread replies yet</div></div>
+</ng-template>

projects/customizations-example/src/app/app.component.scss

@@ -0,0 +1,7 @@
+.empty-list {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}

projects/customizations-example/src/app/app.component.ts

@@ -91,6 +91,10 @@ export class AppComponent implements AfterViewInit {
   private customAttachmentUploadTemplate!: TemplateRef<CustomAttachmentUploadContext>;
   @ViewChild('dateSeparator')
   private dateSeparatorTemplate!: TemplateRef<DateSeparatorContext>;
+  @ViewChild('emptyMainMessageList')
+  private emptyMainMessageListTemplate!: TemplateRef<void>;
+  @ViewChild('emptyThreadMessageList')
+  private emptyThreadMessageListTemplate!: TemplateRef<void>;
 
   constructor(
     private chatService: ChatClientService,
@@ -170,6 +174,12 @@ export class AppComponent implements AfterViewInit {
     this.customTemplatesService.dateSeparatorTemplate$.next(
       this.dateSeparatorTemplate
     );
+    this.customTemplatesService.emptyMainMessageListPlaceholder$.next(
+      this.emptyMainMessageListTemplate
+    );
+    this.customTemplatesService.emptyThreadMessageListPlaceholder$.next(
+      this.emptyThreadMessageListTemplate
+    );
   }
 
   inviteClicked(channel: Channel) {

projects/customizations-example/src/styles.scss

@@ -27,3 +27,8 @@ body {
 .material-icons {
   font-family: "Material Icons" !important;
 }
+
+.str-chat__thread
+  .str-chat__main-panel-inner.str-chat-angular__message-list-host--empty {
+  height: 100%;
+}