Merge pull request #407 from GetStream/new-content-injection-points

New content injection points

Author: szuperaz

docusaurus/docs/Angular/components/ChannelListComponent.mdx

@@ -32,5 +32,18 @@ The `ChannelList` component uses the [`Icon`](./IconComponent.mdx) component to
 
 If you only want to customize the channel preview items (not the whole list), see the [channel preview customization](./ChannelPreviewComponent.mdx/#customization) guide.
 
+**Example 3** - Content injection points
+
+It's possible to inject your own content to the top or to the bottom of the channel list:
+
+```html
+<stream-channel-list>
+  <input channel-list-top placeholder="Search" />
+  <button channel-list-bottom>Add new channel</button>
+</stream-channel-list>
+```
+
+Use the `channel-list-top` attribute to inject content at the top of the channel list, and the `channel-list-bottom` to display content at the bottom of the channel list.
+
 [//]: # "Start of generated content"
 [//]: # "End of generated content"

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

@@ -1,5 +1,8 @@
 <div id="root">
-  <stream-channel-list></stream-channel-list>
+  <stream-channel-list>
+    <input channel-list-top placeholder="Search" />
+    <button channel-list-bottom>Add new channel</button>
+  </stream-channel-list>
   <stream-channel>
     <stream-channel-header></stream-channel-header>
     <stream-message-list></stream-message-list>
@@ -225,3 +228,7 @@
     (closeThread)="closeThreadHandler()"
   ></app-thread-header>
 </ng-template>
+
+<ng-template #customChannelInfo let-channel="channel">
+  This channel has {{ channel?.data?.member_count }} members
+</ng-template>

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

@@ -4,6 +4,7 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core';
+import { ChannelHeaderInfoContext } from 'projects/stream-chat-angular/src/public-api';
 import { Channel } from 'stream-chat';
 import {
   ChatClientService,
@@ -79,6 +80,8 @@ export class AppComponent implements AfterViewInit {
   private notificationTemplate!: TemplateRef<NotificationContext>;
   @ViewChild('threadHeaderTemplate')
   private threadHeaderTemplate!: TemplateRef<ThreadHeaderContext>;
+  @ViewChild('customChannelInfo')
+  private chstomChannelInfoTemplate!: TemplateRef<ChannelHeaderInfoContext>;
 
   constructor(
     private chatService: ChatClientService,
@@ -149,6 +152,9 @@ export class AppComponent implements AfterViewInit {
     this.customTemplatesService.threadHeaderTemplate$.next(
       this.threadHeaderTemplate
     );
+    this.customTemplatesService.channelHeaderInfoTemplate$.next(
+      this.chstomChannelInfoTemplate
+    );
   }
 
   inviteClicked(channel: Channel) {

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html

@@ -24,16 +24,25 @@
     >
       {{ displayText }}
     </p>
-    <p
-      data-testid="info"
-      class="
-        str-chat__header-livestream-left--members str-chat__channel-header-info
+    <ng-container
+      *ngTemplateOutlet="
+        channelHeaderInfoTemplate || defaultChannelInfo;
+        context: getChannelInfoContext()
       "
-    >
-      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}
-      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |
-      translate:watcherCountParam) : ''}}
-    </p>
+    ></ng-container>
+    <ng-template #defaultChannelInfo>
+      <p
+        data-testid="info"
+        class="
+          str-chat__header-livestream-left--members
+          str-chat__channel-header-info
+        "
+      >
+        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}
+        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |
+        translate:watcherCountParam) : ''}}
+      </p>
+    </ng-template>
   </div>
   <ng-container *ngIf="channelActionsTemplate">
     <ng-container

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts

@@ -12,7 +12,11 @@ import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { getChannelDisplayText } from '../get-channel-display-text';
-import { ChannelActionsContext, DefaultStreamChatGenerics } from '../types';
+import {
+  ChannelActionsContext,
+  ChannelHeaderInfoContext,
+  DefaultStreamChatGenerics,
+} from '../types';
 
 /**
  * The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
@@ -24,6 +28,7 @@ import { ChannelActionsContext, DefaultStreamChatGenerics } from '../types';
 })
 export class ChannelHeaderComponent implements OnInit, OnDestroy {
   channelActionsTemplate?: TemplateRef<ChannelActionsContext>;
+  channelHeaderInfoTemplate?: TemplateRef<ChannelHeaderInfoContext>;
   activeChannel: Channel<DefaultStreamChatGenerics> | undefined;
   canReceiveConnectEvents: boolean | undefined;
   private subscriptions: Subscription[] = [];
@@ -55,6 +60,14 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
         }
       )
     );
+    this.subscriptions.push(
+      this.customTemplatesService.channelHeaderInfoTemplate$.subscribe(
+        (template) => {
+          this.channelHeaderInfoTemplate = template;
+          this.cdRef.detectChanges();
+        }
+      )
+    );
   }
 
   ngOnDestroy(): void {
@@ -70,6 +83,10 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
     return { channel: this.activeChannel! };
   }
 
+  getChannelInfoContext(): ChannelHeaderInfoContext {
+    return { channel: this.activeChannel! };
+  }
+
   get memberCountParam() {
     return { memberCount: this.activeChannel?.data?.member_count || 0 };
   }

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

@@ -31,6 +31,7 @@
       >
         {{ "streamChat.You have no channels currently" | translate }}
       </p>
+      <ng-content select="[channel-list-top]"></ng-content>
       <ng-container
         *ngFor="let channel of channels$ | async; trackBy: trackByChannelId"
       >
@@ -69,6 +70,7 @@
           ></ng-template>
         </button>
       </div>
+      <ng-content select="[channel-list-bottom]"></ng-content>
     </div>
   </div>
 </div>

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

@@ -5,6 +5,7 @@ import {
   AttachmentPreviewListContext,
   AvatarContext,
   ChannelActionsContext,
+  ChannelHeaderInfoContext,
   ChannelPreviewContext,
   CommandAutocompleteListItemContext,
   DeliveredStatusContext,
@@ -211,6 +212,12 @@ export class CustomTemplatesService {
   readStatusTemplate$ = new BehaviorSubject<
     TemplateRef<ReadStatusContext> | undefined
   >(undefined);
+  /**
+   * The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx)
+   */
+  channelHeaderInfoTemplate$ = new BehaviorSubject<
+    TemplateRef<ChannelHeaderInfoContext> | undefined
+  >(undefined);
 
   constructor() {}
 }

projects/stream-chat-angular/src/lib/types.ts

@@ -289,3 +289,7 @@ export type ReadStatusContext = {
   message: StreamMessage;
   readByText: string;
 };
+
+export type ChannelHeaderInfoContext<
+  T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = { channel: Channel<T> };