content projection is applied

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -36,8 +36,17 @@
     </mat-menu>
   </div>
   <div>
-    <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async"
-      [favoritBuddyList]="favoritBuddyList$ | async" (selectBuddy)="onSelectBuddy($event)">
+    <ucap-group-expansion-panel
+      #groupExpansionPanel
+      [groupBuddyList]="groupBuddyList$ | async"
+      [favoritBuddyList]="favoritBuddyList$ | async"
+    >
+      <ucap-profile-user-list-item
+        *ucapGroupExpansionPanelItem="let userInfo"
+        [userInfo]="userInfo"
+        (click)="onSelectBuddy(userInfo)"
+      >
+      </ucap-profile-user-list-item>
     </ucap-group-expansion-panel>
   </div>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts

@@ -144,7 +144,8 @@ export class GroupComponent implements OnInit {
   }
 
   onSelectBuddy(buddy: UserInfo) {
-    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: String(buddy.seq) }));
+    // this.store.dispatch(ChatStore.selectedRoom({ roomSeq: String(buddy.seq) }));
+    this.logger.debug('onSelectBuddy', buddy);
   }
 
   onKeyDownEnterOrganizationTenantSearch(params: {

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -5,9 +5,20 @@
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <ucap-profile-user-list-item *ngFor="let favUserList of favoritBuddyList" [userInfo]="favUserList"
-      (click)="onClickBuddy(favUserList)">
-    </ucap-profile-user-list-item>
+    <ng-container *ngFor="let favUserList of favoritBuddyList">
+      <ng-template
+        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
+        [ngTemplateOutletContext]="{ $implicit: favUserList }"
+      >
+      </ng-template>
+    </ng-container>
+
+    <!-- <ucap-profile-user-list-item
+      *ngFor="let favUserList of favoritBuddyList"
+      [userInfo]="favUserList"
+      (click)="onClickBuddy(favUserList)"
+    >
+    </ucap-profile-user-list-item> -->
   </mat-expansion-panel>
 
   <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList">
@@ -16,9 +27,19 @@
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
-      (click)="onClickBuddy(userInfo)">
-    </ucap-profile-user-list-item>
+    <ng-container *ngFor="let userInfo of groupBuddy.buddyList">
+      <ng-template
+        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
+        [ngTemplateOutletContext]="{ $implicit: userInfo }"
+      ></ng-template>
+    </ng-container>
+
+    <!-- <ucap-profile-user-list-item
+      *ngFor="let userInfo of groupBuddy.buddyList"
+      [userInfo]="userInfo"
+      (click)="onClickBuddy(userInfo)"
+    >
+    </ucap-profile-user-list-item> -->
     <!-- <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
       [presence]="presence">
     </ucap-profile-user-list-item> -->

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -4,13 +4,16 @@ import {
   Input,
   Output,
   EventEmitter,
-  ViewChild
+  ViewChild,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
 import { MatAccordion } from '@angular/material';
+import { ExpansionPanelItemDirective } from '../directives/expansion-panel-item.directive';
 
 @Component({
   selector: 'ucap-group-expansion-panel',
@@ -28,6 +31,12 @@ export class ExpansionPanelComponent implements OnInit {
   @Output()
   selectBuddy = new EventEmitter<UserInfo>();
 
+  @ContentChild(ExpansionPanelItemDirective, {
+    read: TemplateRef,
+    static: true
+  })
+  expansionPanelItemTemplateRef: TemplateRef<ExpansionPanelItemDirective>;
+
   @ViewChild('groupAccordion', { static: true }) groupAccordion: MatAccordion;
 
   constructor() {}