From 1802aa0af98828398159d65e2815619d59bf77c4 Mon Sep 17 00:00:00 2001
From: Asli Aykan <56061820+asliayk@users.noreply.github.com>
Date: Sat, 14 Dec 2024 14:28:13 +0300
Subject: [PATCH] Development: Migrate client code for conversation detail tabs
 (#9973)

---
 .../conversation-detail-dialog.component.html |   2 +-
 .../conversation-info.component.html          |  14 +--
 .../conversation-info.component.ts            |  52 ++++----
 .../conversation-member-row.component.html    |   6 +-
 .../conversation-member-row.component.ts      | 114 +++++++++++-------
 .../conversation-members.component.html       |  10 +-
 .../conversation-members.component.ts         |  67 ++++++----
 .../conversation-settings.component.html      |   2 +-
 .../conversation-settings.component.ts        |  61 +++++-----
 ...nversation-detail-dialog.component.spec.ts |   2 +-
 .../conversation-info.component.spec.ts       |   9 +-
 .../conversation-member-row.component.spec.ts |  17 ++-
 .../conversation-members.component.spec.ts    |  14 ++-
 .../conversation-settings.component.spec.ts   |  20 ++-
 14 files changed, 228 insertions(+), 162 deletions(-)

diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
index 193b823d77b3..140de9ad8ee8 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
@@ -62,7 +62,7 @@ <h4 class="modal-title">
         <div class="modal-body">
             @switch (selectedTab) {
                 @case (Tabs.MEMBERS) {
-                    <jhi-conversation-members [course]="course" [activeConversation]="activeConversation" (changesPerformed)="changesWerePerformed = true" />
+                    <jhi-conversation-members [course]="course" [activeConversationInput]="activeConversation" (changesPerformed)="changesWerePerformed = true" />
                 }
                 @case (Tabs.INFO) {
                     <jhi-conversation-info [activeConversation]="activeConversation" [course]="course" (changesPerformed)="changesWerePerformed = true" />
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html
index 78984e09adcb..a8c0724dff35 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html
@@ -1,8 +1,8 @@
-@if (activeConversation && course) {
+@if (activeConversation() && course()) {
     <div class="container-fluid conversation-info">
         <div class="row info-container">
             <!-- Name (Only for Channels and Group Chats)-->
-            @if (getAsChannelOrGroupChat(activeConversation); as channelOrGroupChat) {
+            @if (getAsChannelOrGroupChat(activeConversation()); as channelOrGroupChat) {
                 <div id="name-section" class="col-12 info-section" [class.interactive]="!readOnlyMode">
                     <div class="form-floating">
                         <textarea
@@ -29,7 +29,7 @@
                 </div>
             }
             <!-- Topic (Only for Channels)-->
-            @if (getAsChannel(activeConversation); as channel) {
+            @if (getAsChannel(activeConversation()); as channel) {
                 <div id="topic-section" class="col-12 info-section" [class.interactive]="!readOnlyMode">
                     <div class="form-floating">
                         <textarea
@@ -53,7 +53,7 @@
                 </div>
             }
             <!-- Description (Only for Channels)-->
-            @if (getAsChannel(activeConversation); as channel) {
+            @if (getAsChannel(activeConversation()); as channel) {
                 <div id="description-section" class="col-12 info-section" [class.interactive]="!readOnlyMode">
                     <div class="form-floating">
                         <textarea
@@ -82,15 +82,15 @@
                     <h6 jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.moreInfo"></h6>
                 </div>
                 <ul>
-                    @if (activeConversation.creator) {
+                    @if (activeConversation()?.creator) {
                         <li>
                             {{ 'artemisApp.dialogs.conversationDetail.infoTab.createdBy' | artemisTranslate }}:
-                            {{ activeConversation.creator ? getUserLabel(activeConversation.creator) : '' }}
+                            {{ getCreator() ? getUserLabel(getCreator()!) : '' }}
                         </li>
                     }
                     <li>
                         {{ 'artemisApp.dialogs.conversationDetail.infoTab.createdOn' | artemisTranslate }}:
-                        {{ activeConversation.creationDate ? (activeConversation.creationDate | artemisDate) : '' }}
+                        {{ activeConversation()!.creationDate ? (activeConversation()!.creationDate | artemisDate) : '' }}
                     </li>
                 </ul>
             </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts
index 5c0abe66d1c5..496322be93a6 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, input, output } from '@angular/core';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { ChannelDTO, getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
 import { defaultSecondLayerDialogOptions, getUserLabel } from 'app/overview/course-conversations/other/conversation.util';
@@ -19,6 +19,7 @@ import { canChangeChannelProperties, canChangeGroupChatProperties } from 'app/sh
 import { GroupChatDTO, getAsGroupChatDTO, isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model';
 import { GroupChatService } from 'app/shared/metis/conversations/group-chat.service';
 import { catchError } from 'rxjs/operators';
+import { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model';
 
 @Component({
     selector: 'jhi-conversation-info',
@@ -39,27 +40,25 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
         return getAsChannelDTO(conversation) || getAsGroupChatDTO(conversation);
     }
 
-    @Input()
-    activeConversation: ConversationDTO;
+    getCreator(): ConversationUserDTO | null {
+        return this.activeConversation()?.creator as ConversationUserDTO | null;
+    }
 
-    @Input()
-    course: Course;
+    activeConversation = input.required<ConversationDTO>();
+    course = input<Course>();
+    changesPerformed = output<void>();
 
-    @Output()
-    changesPerformed = new EventEmitter<void>();
+    private channelService = inject(ChannelService);
+    private groupChatService = inject(GroupChatService);
+    private modalService = inject(NgbModal);
+    private alertService = inject(AlertService);
 
     readOnlyMode = false;
-    constructor(
-        private channelService: ChannelService,
-        private groupChatService: GroupChatService,
-        private modalService: NgbModal,
-        private alertService: AlertService,
-    ) {}
 
     ngOnInit(): void {
-        if (this.activeConversation) {
-            if (getAsChannelDTO(this.activeConversation)) {
-                this.readOnlyMode = !!getAsChannelDTO(this.activeConversation)?.isArchived;
+        if (this.activeConversation()) {
+            if (getAsChannelDTO(this.activeConversation())) {
+                this.readOnlyMode = !!getAsChannelDTO(this.activeConversation())?.isArchived;
             }
         }
     }
@@ -74,7 +73,7 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
     }
 
     openEditNameModal(event: MouseEvent) {
-        const channelOrGroupChat = this.getAsChannelOrGroupChat(this.activeConversation);
+        const channelOrGroupChat = this.getAsChannelOrGroupChat(this.activeConversation()!);
         if (!channelOrGroupChat) {
             return;
         }
@@ -93,7 +92,7 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
     }
 
     openEditTopicModal(event: MouseEvent) {
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation());
         if (!channel) {
             return;
         }
@@ -112,7 +111,7 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
     }
 
     openDescriptionTopicModal(event: MouseEvent) {
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation());
         if (!channel) {
             return;
         }
@@ -170,11 +169,15 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
     }
 
     private updateGroupChat<K extends keyof GroupChatDTO>(groupChat: GroupChatDTO, propertyName: K, updateValue: GroupChatDTO[K]) {
+        const courseId = this.course()?.id;
+        if (!courseId) {
+            return;
+        }
         const updateDTO = new GroupChatDTO();
         updateDTO[propertyName] = updateValue;
 
         this.groupChatService
-            .update(this.course.id!, groupChat.id!, updateDTO)
+            .update(courseId, groupChat.id!, updateDTO)
             .pipe(
                 map((res: HttpResponse<GroupChatDTO>) => res.body),
                 takeUntil(this.ngUnsubscribe),
@@ -189,10 +192,14 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
     }
 
     private updateChannel<K extends keyof ChannelDTO>(channel: ChannelDTO, propertyName: K, updateValue: ChannelDTO[K]) {
+        const courseId = this.course()?.id;
+        if (!courseId) {
+            return;
+        }
         const updateDTO = new ChannelDTO();
         updateDTO[propertyName] = updateValue;
         this.channelService
-            .update(this.course.id!, channel.id!, updateDTO)
+            .update(courseId, channel.id!, updateDTO)
             .pipe(
                 map((res: HttpResponse<ChannelDTO>) => res.body),
                 takeUntil(this.ngUnsubscribe),
@@ -209,4 +216,7 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
                 },
             });
     }
+
+    protected readonly ConversationDTO = ConversationDTO;
+    protected readonly ConversationUserDTO = ConversationUserDTO;
 }
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html
index 34454b54a61c..17241057bc57 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html
@@ -1,4 +1,4 @@
-@if (activeConversation && course) {
+@if (activeConversation() && course()) {
     <div class="d-flex justify-content-between align-items-center conversation-member-row" (mouseleave)="$event.stopPropagation(); userDropdown.close()">
         <span class="d-inline-block">
             <jhi-profile-picture
@@ -11,11 +11,11 @@
                 [imageUrl]="userImageUrl"
             >
             </jhi-profile-picture>
-            @if (isChannel(activeConversation) && conversationMember?.isChannelModerator) {
+            @if (isChannel(activeConversation()!) && conversationMember()?.isChannelModerator) {
                 <fa-icon [icon]="faUserGear" [ngbTooltip]="'artemisApp.dialogs.conversationDetail.memberTab.memberRow.channelModeratorTooltip' | artemisTranslate" />
             }
             {{ userLabel }}
-            @if (!conversationMember.isStudent) {
+            @if (!conversationMember()?.isStudent) {
                 <fa-icon class="ms-1 text-secondary" [icon]="userIcon" [ngbTooltip]="userTooltip" />
             }
         </span>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts
index da22826776da..3824645cfab9 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, HostBinding, OnDestroy, OnInit, inject, input, output } from '@angular/core';
 import { faEllipsis, faUser, faUserCheck, faUserGear, faUserGraduate } from '@fortawesome/free-solid-svg-icons';
 import { User } from 'app/core/user/user.model';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
@@ -10,7 +10,7 @@ import { canGrantChannelModeratorRole, canRemoveUsersFromConversation, canRevoke
 import { defaultSecondLayerDialogOptions, getUserLabel } from 'app/overview/course-conversations/other/conversation.util';
 import { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
+import { ChannelDTO, getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
 import { TranslateService } from '@ngx-translate/core';
 import { GenericConfirmationDialogComponent } from 'app/overview/course-conversations/dialogs/generic-confirmation-dialog/generic-confirmation-dialog.component';
 import { onError } from 'app/shared/util/global.utils';
@@ -30,17 +30,10 @@ import { catchError } from 'rxjs/operators';
 export class ConversationMemberRowComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
 
-    @Input()
-    activeConversation: ConversationDTO;
-
-    @Input()
-    course: Course;
-
-    @Output()
-    changePerformed: EventEmitter<void> = new EventEmitter<void>();
-
-    @Input()
-    conversationMember: ConversationUserDTO;
+    activeConversation = input<ConversationDTO>();
+    course = input<Course>();
+    changePerformed = output<void>();
+    conversationMember = input<ConversationUserDTO>();
 
     idOfLoggedInUser: number;
 
@@ -71,40 +64,39 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
     canGrantChannelModeratorRole = canGrantChannelModeratorRole;
     canRevokeChannelModeratorRole = canRevokeChannelModeratorRole;
     canRemoveUsersFromConversation = canRemoveUsersFromConversation;
-    constructor(
-        private accountService: AccountService,
-        private modalService: NgbModal,
-        private translateService: TranslateService,
-        private channelService: ChannelService,
-        private groupChatService: GroupChatService,
-        private alertService: AlertService,
-    ) {}
+
+    private accountService = inject(AccountService);
+    private modalService = inject(NgbModal);
+    private translateService = inject(TranslateService);
+    private channelService = inject(ChannelService);
+    private groupChatService = inject(GroupChatService);
+    private alertService = inject(AlertService);
 
     ngOnInit(): void {
-        if (this.conversationMember && this.activeConversation) {
+        if (this.conversationMember() && this.activeConversation()) {
             this.accountService.identity().then((loggedInUser: User) => {
                 this.idOfLoggedInUser = loggedInUser.id!;
-                if (this.conversationMember.id === this.idOfLoggedInUser) {
+                if (this.conversationMember()?.id === this.idOfLoggedInUser) {
                     this.isCurrentUser = true;
                 }
-                if (this.conversationMember.id === this.activeConversation?.creator?.id) {
+                if (this.conversationMember()?.id === this.activeConversation()?.creator?.id) {
                     this.isCreator = true;
                 }
 
-                this.userImageUrl = this.conversationMember.imageUrl;
-                this.userId = this.conversationMember.id;
-                this.userName = this.conversationMember.name;
-                this.userLabel = getUserLabel(this.conversationMember);
+                this.userImageUrl = this.conversationMember()?.imageUrl;
+                this.userId = this.conversationMember()?.id;
+                this.userName = this.conversationMember()?.name;
+                this.userLabel = getUserLabel(this.conversationMember()!);
                 this.setUserAuthorityIconAndTooltip();
                 // the creator of a channel can not be removed from the channel
-                this.canBeRemovedFromConversation = !this.isCurrentUser && this.canRemoveUsersFromConversation(this.activeConversation);
-                if (isChannelDTO(this.activeConversation)) {
+                this.canBeRemovedFromConversation = !this.isCurrentUser && this.canRemoveUsersFromConversation(this.activeConversation()!);
+                if (isChannelDTO(this.activeConversation()!)) {
                     // the creator of a channel can not be removed from the channel
-                    this.canBeRemovedFromConversation = this.canBeRemovedFromConversation && !this.isCreator && !this.activeConversation.isCourseWide;
-                    this.canBeGrantedChannelModeratorRole = this.canGrantChannelModeratorRole(this.activeConversation) && !this.conversationMember.isChannelModerator;
+                    this.canBeRemovedFromConversation = this.canBeRemovedFromConversation && !this.isCreator && !(this.activeConversation() as ChannelDTO)!.isCourseWide;
+                    this.canBeGrantedChannelModeratorRole = this.canGrantChannelModeratorRole(this.activeConversation()!) && !this.conversationMember()?.isChannelModerator;
                     // the creator of a channel cannot be revoked the channel moderator role
                     this.canBeRevokedChannelModeratorRole =
-                        this.canRevokeChannelModeratorRole(this.activeConversation) && !this.isCreator && !!this.conversationMember.isChannelModerator;
+                        this.canRevokeChannelModeratorRole(this.activeConversation()!) && !this.isCreator && !!this.conversationMember()?.isChannelModerator;
                 }
             });
         }
@@ -117,7 +109,7 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
 
     openGrantChannelModeratorRoleDialog(event: MouseEvent) {
         event.stopPropagation();
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation()!);
         if (!channel) {
             return;
         }
@@ -131,13 +123,21 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
             channelName: channel.name!,
             userName: this.userLabel,
         };
-        const confirmedCallback = () => this.channelService.grantChannelModeratorRole(this.course.id!, channel.id!, [this.conversationMember.login!]);
+        const confirmedCallback = () => {
+            const courseId = this.course?.()?.id;
+            const channelId = channel?.id;
+            const memberLogin = this.conversationMember?.()?.login;
+            if (!courseId || !channelId || !memberLogin) {
+                throw new Error('Required parameters are missing');
+            }
+            return this.channelService.grantChannelModeratorRole(courseId, channelId, [memberLogin]);
+        };
         this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
     }
 
     openRevokeChannelModeratorRoleDialog(event: MouseEvent) {
         event.stopPropagation();
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation()!);
         if (!channel) {
             return;
         }
@@ -151,13 +151,21 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
             channelName: channel.name!,
             userName: this.userLabel,
         };
-        const confirmedCallback = () => this.channelService.revokeChannelModeratorRole(this.course.id!, channel.id!, [this.conversationMember.login!]);
+        const confirmedCallback = () => {
+            const courseId = this.course?.()?.id;
+            const channelId = channel?.id;
+            const memberLogin = this.conversationMember?.()?.login;
+            if (!courseId || !channelId || !memberLogin) {
+                throw new Error('Required parameters are missing');
+            }
+            return this.channelService.revokeChannelModeratorRole(courseId, channelId, [memberLogin]);
+        };
         this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
     }
 
     openRemoveFromChannelDialog(event: MouseEvent) {
         event.stopPropagation();
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation()!);
         if (!channel) {
             return;
         }
@@ -182,13 +190,21 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
             userName: this.userLabel,
             channelName: channel.name!,
         };
-        const confirmedCallback = () => this.channelService.deregisterUsersFromChannel(this.course.id!, this.activeConversation.id!, [this.conversationMember.login!]);
+        const confirmedCallback = () => {
+            const courseId = this.course?.()?.id;
+            const activeConversationId = this.activeConversation()?.id;
+            const memberLogin = this.conversationMember?.()?.login;
+            if (!courseId || !activeConversationId || !memberLogin) {
+                throw new Error('Required parameters are missing');
+            }
+            return this.channelService.deregisterUsersFromChannel(courseId, activeConversationId, [memberLogin]);
+        };
         this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
     }
 
     openRemoveFromGroupChatDialog(event: MouseEvent) {
         event.stopPropagation();
-        const groupChat = getAsGroupChatDTO(this.activeConversation);
+        const groupChat = getAsGroupChatDTO(this.activeConversation()!);
         if (!groupChat) {
             return;
         }
@@ -201,7 +217,15 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
         const translationParams = {
             userName: this.userLabel,
         };
-        const confirmedCallback = () => this.groupChatService.removeUsersFromGroupChat(this.course.id!, this.activeConversation.id!, [this.conversationMember.login!]);
+        const confirmedCallback = () => {
+            const courseId = this.course?.()?.id;
+            const activeConversationId = this.activeConversation()?.id;
+            const memberLogin = this.conversationMember?.()?.login;
+            if (!courseId || !activeConversationId || !memberLogin) {
+                throw new Error('Required parameters are missing');
+            }
+            return this.groupChatService.removeUsersFromGroupChat(courseId, activeConversationId, [memberLogin]);
+        };
         this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
     }
 
@@ -235,9 +259,9 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
     }
 
     openRemoveFromConversationDialog(event: MouseEvent) {
-        if (isChannelDTO(this.activeConversation)) {
+        if (isChannelDTO(this.activeConversation()!)) {
             this.openRemoveFromChannelDialog(event);
-        } else if (isGroupChatDTO(this.activeConversation)) {
+        } else if (isGroupChatDTO(this.activeConversation()!)) {
             this.openRemoveFromGroupChatDialog(event);
         } else {
             throw new Error('Unsupported conversation type');
@@ -247,10 +271,10 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
     setUserAuthorityIconAndTooltip(): void {
         const toolTipTranslationPath = 'artemisApp.metis.userAuthorityTooltips.';
         // highest authority is displayed
-        if (this.conversationMember.isInstructor) {
+        if (this.conversationMember()?.isInstructor) {
             this.userIcon = faUserGraduate;
             this.userTooltip = this.translateService.instant(toolTipTranslationPath + 'instructor');
-        } else if (this.conversationMember.isEditor || this.conversationMember.isTeachingAssistant) {
+        } else if (this.conversationMember()?.isEditor || this.conversationMember()?.isTeachingAssistant) {
             this.userIcon = faUserCheck;
             this.userTooltip = this.translateService.instant(toolTipTranslationPath + 'tutor');
         } else {
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html
index c2184ede4a74..75202a24bc0b 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html
@@ -1,8 +1,8 @@
-@if (course && activeConversation) {
+@if (course() && activeConversation()) {
     <div class="container-fluid">
         <div class="row">
             <div class="col-auto">
-                @if (canAddUsersToConversation(activeConversation)) {
+                @if (canAddUsersToConversation(activeConversation()!)) {
                     <button type="button" class="btn btn-outline-secondary addUsers" (click)="openAddUsersDialog($event)">
                         <fa-icon [icon]="faUserPlus" />
                         {{ 'artemisApp.dialogs.conversationDetail.memberTab.addUsers' | artemisTranslate }}
@@ -33,7 +33,7 @@
                         <option id="instructorFilter" [value]="INSTRUCTOR_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.instructorFilter"></option>
                         <option id="tutorFilter" [value]="TUTOR_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.tutorFilter"></option>
                         <option id="studentFilter" [value]="STUDENT_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.studentFilter"></option>
-                        @if (isChannel(activeConversation)) {
+                        @if (isChannel(activeConversation()!)) {
                             <option [value]="CHANNEL_MODERATOR_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.channelModeratorFilter"></option>
                         }
                     </select>
@@ -55,8 +55,8 @@
                                 [id]="'user-' + user.id"
                                 jhi-conversation-member-row
                                 [conversationMember]="user"
-                                [activeConversation]="activeConversation"
-                                [course]="course"
+                                [activeConversation]="activeConversation()!"
+                                [course]="course()"
                                 (changePerformed)="onChangePerformed()"
                             ></li>
                         }
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.ts
index f62e984acc92..9efb29312453 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit, inject, input, output, signal } from '@angular/core';
 import { ConversationMemberSearchFilter, ConversationService } from 'app/shared/metis/conversations/conversation.service';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { Course } from 'app/entities/course.model';
@@ -27,12 +27,12 @@ export class ConversationMembersComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
 
     private readonly search$ = new Subject<SearchQuery>();
-    @Input()
-    course: Course;
-    @Input()
-    public activeConversation: ConversationDTO;
-    @Output()
-    changesPerformed = new EventEmitter<void>();
+
+    course = input<Course>();
+    activeConversationInput = input<ConversationDTO>();
+    activeConversation = signal<ConversationDTO | null>(null);
+    changesPerformed = output<void>();
+
     canAddUsersToConversation = canAddUsersToConversation;
     getAsChannel = getAsChannelDTO;
     isChannel = isChannelDTO;
@@ -59,12 +59,10 @@ export class ConversationMembersComponent implements OnInit, OnDestroy {
     STUDENT_FILTER_OPTION = ConversationMemberSearchFilter.STUDENT;
     CHANNEL_MODERATOR_FILTER_OPTION = ConversationMemberSearchFilter.CHANNEL_MODERATOR;
 
-    constructor(
-        public conversationService: ConversationService,
-        private alertService: AlertService,
-        private modalService: NgbModal,
-        private cdr: ChangeDetectorRef,
-    ) {}
+    public conversationService = inject(ConversationService);
+    private alertService = inject(AlertService);
+    private modalService = inject(NgbModal);
+    private cdr = inject(ChangeDetectorRef);
 
     trackIdentity(index: number, item: ConversationUserDTO) {
         return item.id;
@@ -73,8 +71,8 @@ export class ConversationMembersComponent implements OnInit, OnDestroy {
     openAddUsersDialog(event: MouseEvent) {
         event.stopPropagation();
         const modalRef: NgbModalRef = this.modalService.open(ConversationAddUsersDialogComponent, defaultSecondLayerDialogOptions);
-        modalRef.componentInstance.course = this.course;
-        modalRef.componentInstance.activeConversation = this.activeConversation;
+        modalRef.componentInstance.course = this.course();
+        modalRef.componentInstance.activeConversation = this.activeConversation();
         modalRef.componentInstance.initialize();
         from(modalRef.result)
             .pipe(
@@ -114,16 +112,20 @@ export class ConversationMembersComponent implements OnInit, OnDestroy {
                     this.isSearching = true;
                     this.searchTerm = searchTerm;
                 }),
-                switchMap(() =>
-                    this.conversationService.searchMembersOfConversation(
-                        this.course.id!,
-                        this.activeConversation.id!,
-                        this.searchTerm,
-                        this.page - 1,
-                        this.itemsPerPage,
-                        Number(this.selectedFilter),
-                    ),
-                ),
+                switchMap(() => {
+                    if (this.course()?.id && this.activeConversation()?.id) {
+                        return this.conversationService.searchMembersOfConversation(
+                            this.course()?.id!,
+                            this.activeConversation()?.id!,
+                            this.searchTerm,
+                            this.page - 1,
+                            this.itemsPerPage,
+                            Number(this.selectedFilter),
+                        );
+                    } else {
+                        return EMPTY;
+                    }
+                }),
                 takeUntil(this.ngUnsubscribe),
             )
             .subscribe({
@@ -140,6 +142,11 @@ export class ConversationMembersComponent implements OnInit, OnDestroy {
             searchTerm: '',
             force: true,
         });
+
+        const inputValue = this.activeConversationInput();
+        if (inputValue) {
+            this.activeConversation.set(inputValue);
+        }
     }
 
     ngOnDestroy() {
@@ -176,7 +183,15 @@ export class ConversationMembersComponent implements OnInit, OnDestroy {
         this.totalItems = Number(headers.get('X-Total-Count'));
         if (this.activeConversation) {
             // might have changed because of user deletion or addition
-            this.activeConversation.numberOfMembers = this.totalItems;
+            this.activeConversation.update((current) => {
+                if (current) {
+                    return {
+                        ...current,
+                        numberOfMembers: this.totalItems,
+                    };
+                }
+                return current;
+            });
         }
         this.members = members || [];
         this.cdr.detectChanges();
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html
index f7f5d5aa0f5a..b30a16ef71fb 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html
@@ -1,4 +1,4 @@
-@if (activeConversation && course) {
+@if (activeConversation() && course()) {
     <div class="container-fluid conversation-settings">
         @if (canLeaveConversation || canChangeChannelArchivalState || canDeleteChannel) {
             <div class="row settings-container">
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts
index 9a9b9b56bb6e..3b1268fafeb8 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, input, output } from '@angular/core';
 import { ChannelDTO, getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { Course } from 'app/entities/course.model';
@@ -24,20 +24,12 @@ import { catchError } from 'rxjs/operators';
 export class ConversationSettingsComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
 
-    @Input()
-    activeConversation: ConversationDTO;
+    activeConversation = input<ConversationDTO>();
+    course = input<Course>();
 
-    @Input()
-    course: Course;
-
-    @Output()
-    channelArchivalChange: EventEmitter<void> = new EventEmitter<void>();
-
-    @Output()
-    channelDeleted: EventEmitter<void> = new EventEmitter<void>();
-
-    @Output()
-    conversationLeave: EventEmitter<void> = new EventEmitter<void>();
+    channelArchivalChange = output<void>();
+    channelDeleted = output<void>();
+    conversationLeave = output<void>();
 
     private dialogErrorSource = new Subject<string>();
     dialogError$ = this.dialogErrorSource.asObservable();
@@ -49,34 +41,35 @@ export class ConversationSettingsComponent implements OnInit, OnDestroy {
     canChangeChannelArchivalState: boolean;
     canDeleteChannel: boolean;
 
-    constructor(
-        private modalService: NgbModal,
-        private channelService: ChannelService,
-        private groupChatService: GroupChatService,
-        private alertService: AlertService,
-    ) {}
+    private modalService = inject(NgbModal);
+    private channelService = inject(ChannelService);
+    private groupChatService = inject(GroupChatService);
+    private alertService = inject(AlertService);
 
     ngOnInit(): void {
-        this.canLeaveConversation = canLeaveConversation(this.activeConversation);
-
-        this.conversationAsChannel = getAsChannelDTO(this.activeConversation);
+        const conversation = this.activeConversation();
+        if (!conversation) {
+            return;
+        }
+        this.canLeaveConversation = canLeaveConversation(conversation);
+        this.conversationAsChannel = getAsChannelDTO(conversation);
         this.canChangeChannelArchivalState = this.conversationAsChannel ? canChangeChannelArchivalState(this.conversationAsChannel) : false;
-        this.canDeleteChannel = this.conversationAsChannel ? canDeleteChannel(this.course, this.conversationAsChannel) : false;
+        this.canDeleteChannel = this.conversationAsChannel ? canDeleteChannel(this.course()!, this.conversationAsChannel) : false;
     }
 
     leaveConversation($event: MouseEvent) {
         $event.stopPropagation();
-        if (isGroupChatDTO(this.activeConversation)) {
+        if (isGroupChatDTO(this.activeConversation()!)) {
             this.groupChatService
-                .removeUsersFromGroupChat(this.course.id!, this.activeConversation.id!)
+                .removeUsersFromGroupChat(this.course()!.id!, this.activeConversation()?.id!)
                 .pipe(takeUntil(this.ngUnsubscribe))
                 .subscribe(() => {
                     this.conversationLeave.emit();
                 });
             return;
-        } else if (isChannelDTO(this.activeConversation)) {
+        } else if (isChannelDTO(this.activeConversation()!)) {
             this.channelService
-                .deregisterUsersFromChannel(this.course.id!, this.activeConversation.id!)
+                .deregisterUsersFromChannel(this.course()!.id!, this.activeConversation()?.id!)
                 .pipe(takeUntil(this.ngUnsubscribe))
                 .subscribe(() => {
                     this.conversationLeave.emit();
@@ -92,7 +85,7 @@ export class ConversationSettingsComponent implements OnInit, OnDestroy {
     }
 
     openArchivalModal(event: MouseEvent) {
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation()!);
         if (!channel) {
             return;
         }
@@ -121,7 +114,7 @@ export class ConversationSettingsComponent implements OnInit, OnDestroy {
                 takeUntil(this.ngUnsubscribe),
             )
             .subscribe(() => {
-                this.channelService.archive(this.course.id!, channel.id!).subscribe({
+                this.channelService.archive(this.course()?.id!, channel.id!).subscribe({
                     next: () => {
                         this.channelArchivalChange.emit();
                     },
@@ -131,7 +124,7 @@ export class ConversationSettingsComponent implements OnInit, OnDestroy {
     }
 
     openUnArchivalModal(event: MouseEvent) {
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation()!);
         if (!channel) {
             return;
         }
@@ -161,7 +154,7 @@ export class ConversationSettingsComponent implements OnInit, OnDestroy {
             )
             .subscribe(() => {
                 this.channelService
-                    .unarchive(this.course.id!, channel.id!)
+                    .unarchive(this.course()?.id!, channel.id!)
                     .pipe(takeUntil(this.ngUnsubscribe))
                     .subscribe({
                         next: () => {
@@ -173,12 +166,12 @@ export class ConversationSettingsComponent implements OnInit, OnDestroy {
     }
 
     deleteChannel() {
-        const channel = getAsChannelDTO(this.activeConversation);
+        const channel = getAsChannelDTO(this.activeConversation()!);
         if (!channel) {
             return;
         }
         this.channelService
-            .delete(this.course.id!, channel.id!)
+            .delete(this.course()?.id!, channel.id!)
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe({
                 next: () => {
diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts
index 07100e45f567..dc0c8f2325a3 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts
@@ -25,7 +25,7 @@ class ConversationMembersStubComponent {
     @Input()
     course: Course;
     @Input()
-    public activeConversation: ConversationDTO;
+    public activeConversationInput: ConversationDTO;
     @Output() changesPerformed = new EventEmitter<void>();
 }
 
diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.spec.ts
index b06aea67f4ef..6f8c5379103d 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.spec.ts
@@ -18,6 +18,7 @@ import { HttpResponse } from '@angular/common/http';
 import { of } from 'rxjs';
 import { GenericUpdateTextPropertyDialogComponent } from 'app/overview/course-conversations/dialogs/generic-update-text-property-dialog/generic-update-text-property-dialog.component';
 import { defaultSecondLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util';
+import { input } from '@angular/core';
 
 const examples: ConversationDTO[] = [generateOneToOneChatDTO({}), generateExampleGroupChatDTO({}), generateExampleChannelDTO({})];
 
@@ -48,9 +49,11 @@ examples.forEach((activeConversation) => {
             canChangeChannelProperties.mockReturnValue(true);
             canChangeGroupChatProperties.mockReturnValue(true);
             fixture = TestBed.createComponent(ConversationInfoComponent);
-            component = fixture.componentInstance;
-            component.activeConversation = activeConversation;
-            component.course = course;
+            TestBed.runInInjectionContext(() => {
+                component = fixture.componentInstance;
+                component.activeConversation = input<ConversationDTO>(activeConversation);
+                component.course = input<Course>(course);
+            });
             component.canChangeChannelProperties = canChangeChannelProperties;
             component.canChangeGroupChatProperties = canChangeGroupChatProperties;
             fixture.detectChanges();
diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts
index 1e43c269b9bf..59d135ef102f 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts
@@ -23,6 +23,7 @@ import { isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model
 import { By } from '@angular/platform-browser';
 import { NgbDropdownMocksModule } from '../../../../../../../../helpers/mocks/directive/ngbDropdownMocks.module';
 import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component';
+import { input, runInInjectionContext } from '@angular/core';
 
 const memberTemplate = {
     id: 1,
@@ -85,10 +86,12 @@ examples.forEach((activeConversation) => {
             canRevokeChannelModeratorRole.mockReturnValue(true);
 
             fixture = TestBed.createComponent(ConversationMemberRowComponent);
-            component = fixture.componentInstance;
-            component.activeConversation = activeConversation;
-            component.course = course;
-            component.conversationMember = conversationMember;
+            TestBed.runInInjectionContext(() => {
+                component = fixture.componentInstance;
+                component.activeConversation = input<ConversationDTO>(activeConversation);
+                component.course = input<Course>(course);
+                component.conversationMember = input<ConversationUserDTO>(conversationMember);
+            });
             component.canRevokeChannelModeratorRole = canRevokeChannelModeratorRole;
             component.canGrantChannelModeratorRole = canGrantChannelModeratorRole;
             component.canRemoveUsersFromConversation = canRemoveUsersFromConversation;
@@ -156,7 +159,11 @@ examples.forEach((activeConversation) => {
 
         it('should show grant moderator button if user is not yet moderator', fakeAsync(() => {
             if (isChannelDTO(activeConversation)) {
-                component.conversationMember.isChannelModerator = false;
+                runInInjectionContext(fixture.debugElement.injector, () => {
+                    const conversationMember = component.conversationMember();
+                    (conversationMember as ChannelDTO).isChannelModerator = false;
+                    component.conversationMember = input<ConversationUserDTO>(conversationMember as ConversationUserDTO);
+                });
                 fixture.detectChanges();
                 tick();
                 fixture.detectChanges();
diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.spec.ts
index 4e18e0a62496..d4f4e305d886 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.spec.ts
@@ -3,7 +3,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ConversationMembersComponent } from 'app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, input, signal } from '@angular/core';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { Course } from 'app/entities/course.model';
 import { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model';
@@ -75,9 +75,11 @@ examples.forEach((activeConversation) => {
             canAddUsersToConversation.mockReturnValue(true);
 
             fixture = TestBed.createComponent(ConversationMembersComponent);
-            component = fixture.componentInstance;
-            component.activeConversation = activeConversation;
-            component.course = course;
+            TestBed.runInInjectionContext(() => {
+                component = fixture.componentInstance;
+                component.activeConversation = signal<ConversationDTO>(activeConversation);
+                component.course = input<Course>(course);
+            });
             component.canAddUsersToConversation = canAddUsersToConversation;
         });
 
@@ -147,7 +149,7 @@ examples.forEach((activeConversation) => {
 
             const modalService = TestBed.inject(NgbModal);
             const mockModalRef = {
-                componentInstance: { course: undefined, activeConversation: undefined, initialize: () => {} },
+                componentInstance: { course: component.course(), activeConversation: component.activeConversation(), initialize: () => {} },
                 result: Promise.resolve(),
             };
             const openDialogSpy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as unknown as NgbModalRef);
@@ -159,7 +161,7 @@ examples.forEach((activeConversation) => {
                 expect(openDialogSpy).toHaveBeenCalledOnce();
                 expect(openDialogSpy).toHaveBeenCalledWith(ConversationAddUsersDialogComponent, defaultSecondLayerDialogOptions);
                 expect(mockModalRef.componentInstance.course).toEqual(course);
-                expect(mockModalRef.componentInstance.activeConversation).toEqual(activeConversation);
+                expect(mockModalRef.componentInstance.activeConversation?.id).toEqual(activeConversation.id);
             });
         }));
 
diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.spec.ts
index 3f4670775995..85057eddc05d 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.spec.ts
@@ -18,6 +18,7 @@ import { HttpResponse } from '@angular/common/http';
 import { GenericConfirmationDialogComponent } from 'app/overview/course-conversations/dialogs/generic-confirmation-dialog/generic-confirmation-dialog.component';
 import { defaultSecondLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util';
 import * as ConversationPermissionUtils from 'app/shared/metis/conversations/conversation-permissions.utils';
+import { input, runInInjectionContext } from '@angular/core';
 
 const examples: ConversationDTO[] = [generateExampleGroupChatDTO({}), generateExampleChannelDTO({})];
 
@@ -43,12 +44,19 @@ examples.forEach((activeConversation) => {
             canDeleteChannel.mockReturnValue(true);
             fixture = TestBed.createComponent(ConversationSettingsComponent);
             component = fixture.componentInstance;
-            component.course = course;
-            component.activeConversation = activeConversation;
-            component.ngOnInit();
+            TestBed.runInInjectionContext(() => {
+                component.course = input<Course>(course);
+                component.activeConversation = input<ConversationDTO>(activeConversation);
+                component.ngOnInit();
+            });
             fixture.detectChanges();
         });
 
+        afterEach(() => {
+            // Reset injection context
+            TestBed.resetTestingModule();
+        });
+
         it('should create', () => {
             expect(component).toBeTruthy();
         });
@@ -118,7 +126,11 @@ examples.forEach((activeConversation) => {
 
         it('should open unarchive dialog when button is pressed', fakeAsync(() => {
             if (isChannelDTO(activeConversation)) {
-                (component.activeConversation as ChannelDTO).isArchived = true;
+                runInInjectionContext(fixture.debugElement.injector, () => {
+                    const activeConversation = component.activeConversation();
+                    (activeConversation as ChannelDTO).isArchived = true;
+                    component.activeConversation = input<ConversationDTO>(activeConversation as ConversationDTO);
+                });
                 fixture.detectChanges();
                 const channelService = TestBed.inject(ChannelService);
                 const unarchivespy = jest.spyOn(channelService, 'unarchive').mockReturnValue(of(new HttpResponse({ status: 200 }) as HttpResponse<void>));