feat: add content injection points to the channel list

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/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>