From 538541c5971ca6cc3c7df8a02ec3c1baaca27f09 Mon Sep 17 00:00:00 2001
From: manasa <manasa.mashetty@in.pega.com>
Date: Fri, 12 Dec 2025 12:08:57 +0530
Subject: [PATCH 1/3] Fixed the Todo issues

---
 .../components/banner/banner.component.scss   |  2 +-
 .../components/todo/todo.component.html       | 50 +++++++++++++------
 .../components/todo/todo.component.scss       |  4 +-
 .../mediaco/components/todo/todo.component.ts | 14 ++++--
 .../wss-nav-bar/wss-nav-bar.component.ts      |  5 +-
 .../mediaco/services/navbar.service.ts        | 19 +++++++
 6 files changed, 69 insertions(+), 25 deletions(-)
 create mode 100644 src/app/_samples/mediaco/services/navbar.service.ts

diff --git a/src/app/_samples/mediaco/components/banner/banner.component.scss b/src/app/_samples/mediaco/components/banner/banner.component.scss
index 80ac3a23..39ee2ebc 100644
--- a/src/app/_samples/mediaco/components/banner/banner.component.scss
+++ b/src/app/_samples/mediaco/components/banner/banner.component.scss
@@ -34,7 +34,7 @@
 }
 
 .background-image-style {
-  height: calc(18rem);
+  height: calc(20rem);
   position: sticky;
   top: var(--mat-toolbar-standard-height, 64px);
   background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));
diff --git a/src/app/_samples/mediaco/components/todo/todo.component.html b/src/app/_samples/mediaco/components/todo/todo.component.html
index 4d44611f..905fcdfc 100644
--- a/src/app/_samples/mediaco/components/todo/todo.component.html
+++ b/src/app/_samples/mediaco/components/todo/todo.component.html
@@ -1,19 +1,37 @@
-<div *ngIf="surveyCase">
-  <div class="banner-container">
-    <div class="icon-wrapper">
-      <div class="icon-box">
-        <img class="quick-link-icon" [src]="img" />
+<app-todo
+  *ngIf="!isMyWorklistChecked; else mediacoTodo"
+  [pConn$]="pConn$"
+  [caseInfoID$]="caseInfoID$"
+  [datasource$]="datasource$"
+  [showTodoList$]="showTodoList$"
+  [headerText$]="headerText$"
+  type$="TODO"
+  [context$]="context$"
+  isConfirm="true"
+></app-todo>
+<ng-template #mediacoTodo>
+  <div *ngIf="surveyCase">
+    <div
+      class="banner-container"
+      [ngStyle]="{
+        left: navbar.isCollapsed() ? '32%' : '37%'
+      }"
+    >
+      <div class="icon-wrapper">
+        <div class="icon-box">
+          <img class="quick-link-icon" [src]="img" />
+        </div>
+      </div>
+      <div class="content-text">
+        <h2>Share Your Experience</h2>
+        <p>Take a quick survey about your recent experience with MediaCo.</p>
+      </div>
+      <div class="action-wrapper">
+        <button (click)="clickGo(surveyCase)" class="start-btn">
+          Start
+          <mat-icon>arrow_forward</mat-icon>
+        </button>
       </div>
-    </div>
-    <div class="content-text">
-      <h2>Share Your Experience</h2>
-      <p>Take a quick survey about your recent experience with MediaCo.</p>
-    </div>
-    <div class="action-wrapper">
-      <button (click)="clickGo(surveyCase)" class="start-btn">
-        Start
-        <mat-icon>arrow_forward</mat-icon>
-      </button>
     </div>
   </div>
-</div>
+</ng-template>
diff --git a/src/app/_samples/mediaco/components/todo/todo.component.scss b/src/app/_samples/mediaco/components/todo/todo.component.scss
index 0579927a..46f5303f 100644
--- a/src/app/_samples/mediaco/components/todo/todo.component.scss
+++ b/src/app/_samples/mediaco/components/todo/todo.component.scss
@@ -21,9 +21,9 @@ $btn-text-color: #5c4498;
     padding: 32px 24px;
   }
 
-  position: absolute;
+  position: fixed;
   z-index: 10;
-  left: 30%;
+  // left: 30%;
   top: 15rem;
 }
 
diff --git a/src/app/_samples/mediaco/components/todo/todo.component.ts b/src/app/_samples/mediaco/components/todo/todo.component.ts
index eabd28c5..420964e2 100644
--- a/src/app/_samples/mediaco/components/todo/todo.component.ts
+++ b/src/app/_samples/mediaco/components/todo/todo.component.ts
@@ -2,10 +2,11 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
-import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService, TodoComponent as OOTBTodoComponent } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { updateWorkList } from '@pega/angular-sdk-components';
+import { NavbarService } from '../../services/navbar.service';
 
 const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
   return PCore.getDataPageUtils()
@@ -57,13 +58,14 @@ interface ToDoProps {
   myWorkList?: any;
   label?: string;
   readOnly?: boolean;
+  isMyWorklistChecked?: boolean;
 }
 
 @Component({
-  selector: 'app-todo',
+  selector: 'app-mediaco-todo',
   templateUrl: './todo.component.html',
   styleUrls: ['./todo.component.scss'],
-  imports: [CommonModule, MatIcon]
+  imports: [CommonModule, MatIcon, OOTBTodoComponent]
 })
 export class TodoComponent implements OnInit, OnDestroy {
   img = this.utils.getImageSrc('message-circle', this.utils.getSDKStaticContentUrl());
@@ -84,10 +86,12 @@ export class TodoComponent implements OnInit, OnDestroy {
   CONSTS: typeof publicConstants;
   bLogging = true;
   surveyCase: any[];
+  isMyWorklistChecked: boolean | undefined;
   constructor(
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private utils: Utils
+    private utils: Utils,
+    public navbar: NavbarService
   ) {}
 
   ngOnInit() {
@@ -120,7 +124,7 @@ export class TodoComponent implements OnInit, OnDestroy {
 
   updateToDo() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ToDoProps;
-
+    this.isMyWorklistChecked = this.configProps$?.isMyWorklistChecked;
     this.headerText$ = this.headerText$ || this.configProps$.headerText;
     this.datasource$ = this.datasource$ || this.configProps$.datasource;
     this.myWorkList$ = this.myWorkList$ || this.configProps$.myWorkList;
diff --git a/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts b/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts
index 105413cf..e539710c 100644
--- a/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts
+++ b/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts
@@ -11,6 +11,7 @@ import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent }
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 import { Utils } from '@pega/angular-sdk-components';
 import { FooterComponent } from 'src/app/_samples/mediaco/components/footer/footer.component';
+import { NavbarService } from '../../services/navbar.service';
 
 // interface WssNavBarProps {
 //   // If any, enter additional props that only exist on this component
@@ -74,7 +75,8 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
     // private cdRef: ChangeDetectorRef,
     // private psService: ProgressSpinnerService,
     private ngZone: NgZone,
-    private utils: Utils
+    private utils: Utils,
+    private navbarService: NavbarService
   ) {}
 
   ngOnInit(): void {
@@ -163,6 +165,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
   toggleMenu() {
     this.collapsed = !this.collapsed;
+    this.navbarService.toggleCollapse();
   }
 
   // navPanelCreateButtonClick() {
diff --git a/src/app/_samples/mediaco/services/navbar.service.ts b/src/app/_samples/mediaco/services/navbar.service.ts
new file mode 100644
index 00000000..fdebb901
--- /dev/null
+++ b/src/app/_samples/mediaco/services/navbar.service.ts
@@ -0,0 +1,19 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavbarService {
+  // Create a writable signal with an initial value of false
+  private isCollapsedSignal = signal(false);
+
+  // Expose a readonly version of the signal to prevent outside modification
+  public readonly isCollapsed = this.isCollapsedSignal.asReadonly();
+
+  constructor() {}
+
+  toggleCollapse() {
+    // 'update' is the safe way to compute a new value from the previous one
+    this.isCollapsedSignal.update(value => !value);
+  }
+}

From 39f43f082565994d4b65ed271789d6205479f6fd Mon Sep 17 00:00:00 2001
From: manasa <manasa.mashetty@in.pega.com>
Date: Sat, 13 Dec 2025 19:29:21 +0530
Subject: [PATCH 2/3] Made changes to render Todo widget in banner using
 portalTemplate

---
 .../components/banner/banner.component.html   |  3 ++-
 .../components/banner/banner.component.ts     | 11 ++++++++-
 .../components/todo/todo.component.html       | 12 ++++------
 .../components/todo/todo.component.scss       |  8 ++-----
 .../mediaco/components/todo/todo.component.ts | 20 ++++++++++++----
 .../wss-nav-bar/wss-nav-bar.component.ts      |  5 +---
 .../mediaco/services/navbar.service.ts        | 19 ---------------
 .../mediaco/services/todoportal.service.ts    | 24 +++++++++++++++++++
 8 files changed, 59 insertions(+), 43 deletions(-)
 delete mode 100644 src/app/_samples/mediaco/services/navbar.service.ts
 create mode 100644 src/app/_samples/mediaco/services/todoportal.service.ts

diff --git a/src/app/_samples/mediaco/components/banner/banner.component.html b/src/app/_samples/mediaco/components/banner/banner.component.html
index ab4e8a56..690f6671 100644
--- a/src/app/_samples/mediaco/components/banner/banner.component.html
+++ b/src/app/_samples/mediaco/components/banner/banner.component.html
@@ -1,8 +1,9 @@
 <div class="background-image-style">
   <div class="background-style content">
-    <div>
+    <div style="justify-content: center; display: inline-grid">
       <h1 class="title" [innerHTML]="title"></h1>
       <p class="message">{{ message }}</p>
+      <ng-template [cdkPortalOutlet]="templatePortal$ | async"></ng-template>
     </div>
   </div>
 </div>
diff --git a/src/app/_samples/mediaco/components/banner/banner.component.ts b/src/app/_samples/mediaco/components/banner/banner.component.ts
index 00ddc743..da07982f 100644
--- a/src/app/_samples/mediaco/components/banner/banner.component.ts
+++ b/src/app/_samples/mediaco/components/banner/banner.component.ts
@@ -2,12 +2,14 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { Component, Input, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PortalModule } from '@angular/cdk/portal';
+import { TodoPortalService } from '../../services/todoportal.service';
 
 @Component({
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss'],
-  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, PortalModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class BannerComponent {
   @Input() pConn$: typeof PConnect;
@@ -20,6 +22,13 @@ export class BannerComponent {
   @Input() backgroundImage: string;
   @Input() layout$: string;
 
+  public templatePortal$: any;
+  constructor(private todoportalService: TodoPortalService) {}
+
+  ngOnInit() {
+    this.templatePortal$ = this.todoportalService.portal$;
+  }
+
   getUrl() {
     return `url(${this.backgroundImage})`;
   }
diff --git a/src/app/_samples/mediaco/components/todo/todo.component.html b/src/app/_samples/mediaco/components/todo/todo.component.html
index 905fcdfc..6808282f 100644
--- a/src/app/_samples/mediaco/components/todo/todo.component.html
+++ b/src/app/_samples/mediaco/components/todo/todo.component.html
@@ -1,5 +1,5 @@
 <app-todo
-  *ngIf="!isMyWorklistChecked; else mediacoTodo"
+  *ngIf="!isMyWorklistChecked"
   [pConn$]="pConn$"
   [caseInfoID$]="caseInfoID$"
   [datasource$]="datasource$"
@@ -8,15 +8,11 @@
   type$="TODO"
   [context$]="context$"
   isConfirm="true"
-></app-todo>
+>
+</app-todo>
 <ng-template #mediacoTodo>
   <div *ngIf="surveyCase">
-    <div
-      class="banner-container"
-      [ngStyle]="{
-        left: navbar.isCollapsed() ? '32%' : '37%'
-      }"
-    >
+    <div class="banner-container">
       <div class="icon-wrapper">
         <div class="icon-box">
           <img class="quick-link-icon" [src]="img" />
diff --git a/src/app/_samples/mediaco/components/todo/todo.component.scss b/src/app/_samples/mediaco/components/todo/todo.component.scss
index 46f5303f..8cb7d714 100644
--- a/src/app/_samples/mediaco/components/todo/todo.component.scss
+++ b/src/app/_samples/mediaco/components/todo/todo.component.scss
@@ -4,6 +4,7 @@ $text-white: #ffffff;
 $btn-text-color: #5c4498;
 
 .banner-container {
+  width: 670px;
   font-family: $font-family;
   background: linear-gradient(135deg, rgb(103, 80, 164) 0%, rgb(248, 20, 227) 50%, rgb(0, 201, 255) 100%) 0% 0% / 200% 200%;
 
@@ -20,11 +21,6 @@ $btn-text-color: #5c4498;
     text-align: center;
     padding: 32px 24px;
   }
-
-  position: fixed;
-  z-index: 10;
-  // left: 30%;
-  top: 15rem;
 }
 
 .icon-wrapper {
@@ -46,7 +42,7 @@ $btn-text-color: #5c4498;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-items: flex-start;
 
   h2 {
     margin: 0 0 6px 0;
diff --git a/src/app/_samples/mediaco/components/todo/todo.component.ts b/src/app/_samples/mediaco/components/todo/todo.component.ts
index 420964e2..5111a788 100644
--- a/src/app/_samples/mediaco/components/todo/todo.component.ts
+++ b/src/app/_samples/mediaco/components/todo/todo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewContainerRef, ViewChild, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
@@ -6,7 +6,8 @@ import { ProgressSpinnerService, TodoComponent as OOTBTodoComponent } from '@peg
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { updateWorkList } from '@pega/angular-sdk-components';
-import { NavbarService } from '../../services/navbar.service';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { TodoPortalService } from '../../services/todoportal.service';
 
 const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
   return PCore.getDataPageUtils()
@@ -87,11 +88,14 @@ export class TodoComponent implements OnInit, OnDestroy {
   bLogging = true;
   surveyCase: any[];
   isMyWorklistChecked: boolean | undefined;
+  @ViewChild('mediacoTodo') private mediacoTodoTemplate: TemplateRef<any>;
+
   constructor(
+    private todoportalService: TodoPortalService,
+    private viewContainerRef: ViewContainerRef,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private utils: Utils,
-    public navbar: NavbarService
+    private utils: Utils
   ) {}
 
   ngOnInit() {
@@ -105,6 +109,14 @@ export class TodoComponent implements OnInit, OnDestroy {
     this.updateToDo();
   }
 
+  ngAfterViewInit() {
+    // Create a TemplatePortal from the template and its view context
+    const portal = new TemplatePortal(this.mediacoTodoTemplate, this.viewContainerRef);
+
+    // Set the portal in the shared service
+    this.todoportalService.setPortal(portal);
+  }
+
   ngOnDestroy() {
     const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 
diff --git a/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts b/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts
index e539710c..105413cf 100644
--- a/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts
+++ b/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts
@@ -11,7 +11,6 @@ import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent }
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 import { Utils } from '@pega/angular-sdk-components';
 import { FooterComponent } from 'src/app/_samples/mediaco/components/footer/footer.component';
-import { NavbarService } from '../../services/navbar.service';
 
 // interface WssNavBarProps {
 //   // If any, enter additional props that only exist on this component
@@ -75,8 +74,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
     // private cdRef: ChangeDetectorRef,
     // private psService: ProgressSpinnerService,
     private ngZone: NgZone,
-    private utils: Utils,
-    private navbarService: NavbarService
+    private utils: Utils
   ) {}
 
   ngOnInit(): void {
@@ -165,7 +163,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
   toggleMenu() {
     this.collapsed = !this.collapsed;
-    this.navbarService.toggleCollapse();
   }
 
   // navPanelCreateButtonClick() {
diff --git a/src/app/_samples/mediaco/services/navbar.service.ts b/src/app/_samples/mediaco/services/navbar.service.ts
deleted file mode 100644
index fdebb901..00000000
--- a/src/app/_samples/mediaco/services/navbar.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class NavbarService {
-  // Create a writable signal with an initial value of false
-  private isCollapsedSignal = signal(false);
-
-  // Expose a readonly version of the signal to prevent outside modification
-  public readonly isCollapsed = this.isCollapsedSignal.asReadonly();
-
-  constructor() {}
-
-  toggleCollapse() {
-    // 'update' is the safe way to compute a new value from the previous one
-    this.isCollapsedSignal.update(value => !value);
-  }
-}
diff --git a/src/app/_samples/mediaco/services/todoportal.service.ts b/src/app/_samples/mediaco/services/todoportal.service.ts
new file mode 100644
index 00000000..b21474de
--- /dev/null
+++ b/src/app/_samples/mediaco/services/todoportal.service.ts
@@ -0,0 +1,24 @@
+// portal.service.ts
+import { Injectable } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TodoPortalService {
+  private portalSource = new BehaviorSubject<TemplatePortal<any> | null>(null);
+
+  /**
+   * An observable that components can subscribe to, to get the portal.
+   */
+  public portal$: Observable<TemplatePortal<any> | null> = this.portalSource.asObservable();
+
+  /**
+   * Sets the portal that should be rendered elsewhere.
+   * @param portal The TemplatePortal to be shared.
+   */
+  setPortal(portal: TemplatePortal<any>) {
+    this.portalSource.next(portal);
+  }
+}

From 76b91811485fce874ed8507a443fa498d406cb6b Mon Sep 17 00:00:00 2001
From: Siva Rama Krishna <sivaramakrishna.tumma@in.pega.com>
Date: Sat, 13 Dec 2025 21:56:44 +0530
Subject: [PATCH 3/3] refactor: replace TodoPortalService with PortalService
 and update component implementations

---
 .../components/banner/banner.component.html   |  4 ++-
 .../components/banner/banner.component.ts     | 13 +++++---
 .../list-view/list-view.component.ts          |  1 -
 .../mediaco/components/todo/todo.component.ts | 12 ++++---
 .../mediaco/services/portal.service.ts        | 32 +++++++++++++++++++
 .../mediaco/services/todoportal.service.ts    | 24 --------------
 6 files changed, 50 insertions(+), 36 deletions(-)
 create mode 100644 src/app/_samples/mediaco/services/portal.service.ts
 delete mode 100644 src/app/_samples/mediaco/services/todoportal.service.ts

diff --git a/src/app/_samples/mediaco/components/banner/banner.component.html b/src/app/_samples/mediaco/components/banner/banner.component.html
index 690f6671..37b691a4 100644
--- a/src/app/_samples/mediaco/components/banner/banner.component.html
+++ b/src/app/_samples/mediaco/components/banner/banner.component.html
@@ -3,7 +3,9 @@
     <div style="justify-content: center; display: inline-grid">
       <h1 class="title" [innerHTML]="title"></h1>
       <p class="message">{{ message }}</p>
-      <ng-template [cdkPortalOutlet]="templatePortal$ | async"></ng-template>
+
+      <!-- The portal content will be rendered here -->
+      <ng-container *cdkPortalOutlet="portal$ | async"></ng-container>
     </div>
   </div>
 </div>
diff --git a/src/app/_samples/mediaco/components/banner/banner.component.ts b/src/app/_samples/mediaco/components/banner/banner.component.ts
index da07982f..14ae3341 100644
--- a/src/app/_samples/mediaco/components/banner/banner.component.ts
+++ b/src/app/_samples/mediaco/components/banner/banner.component.ts
@@ -1,9 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { Component, Input, forwardRef } from '@angular/core';
+import { PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import { Observable } from 'rxjs';
+import { delay } from 'rxjs/operators';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { PortalModule } from '@angular/cdk/portal';
-import { TodoPortalService } from '../../services/todoportal.service';
+import { PortalService } from '../../services/portal.service';
 
 @Component({
   selector: 'app-banner',
@@ -22,11 +24,12 @@ export class BannerComponent {
   @Input() backgroundImage: string;
   @Input() layout$: string;
 
-  public templatePortal$: any;
-  constructor(private todoportalService: TodoPortalService) {}
+  portal$: Observable<TemplatePortal<any> | null>;
+
+  constructor(private portalService: PortalService) {}
 
   ngOnInit() {
-    this.templatePortal$ = this.todoportalService.portal$;
+    this.portal$ = this.portalService.getPortal().pipe(delay(0));
   }
 
   getUrl() {
diff --git a/src/app/_samples/mediaco/components/list-view/list-view.component.ts b/src/app/_samples/mediaco/components/list-view/list-view.component.ts
index bc4c778e..489bdc40 100644
--- a/src/app/_samples/mediaco/components/list-view/list-view.component.ts
+++ b/src/app/_samples/mediaco/components/list-view/list-view.component.ts
@@ -74,7 +74,6 @@ export class ListViewComponent implements OnInit {
       .getDataAsync(this.referenceDataPage, this.pConn$.getContextName())
       .then(({ data }) => {
         this.modifyListData(data);
-        console.log(data);
       });
   }
 
diff --git a/src/app/_samples/mediaco/components/todo/todo.component.ts b/src/app/_samples/mediaco/components/todo/todo.component.ts
index 5111a788..a3f691b2 100644
--- a/src/app/_samples/mediaco/components/todo/todo.component.ts
+++ b/src/app/_samples/mediaco/components/todo/todo.component.ts
@@ -1,13 +1,13 @@
 import { Component, OnInit, OnDestroy, Input, ViewContainerRef, ViewChild, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { MatIcon } from '@angular/material/icon';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ProgressSpinnerService, TodoComponent as OOTBTodoComponent } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { updateWorkList } from '@pega/angular-sdk-components';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { TodoPortalService } from '../../services/todoportal.service';
+import { PortalService } from '../../services/portal.service';
 
 const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
   return PCore.getDataPageUtils()
@@ -88,10 +88,10 @@ export class TodoComponent implements OnInit, OnDestroy {
   bLogging = true;
   surveyCase: any[];
   isMyWorklistChecked: boolean | undefined;
-  @ViewChild('mediacoTodo') private mediacoTodoTemplate: TemplateRef<any>;
+  @ViewChild('mediacoTodo', { read: TemplateRef }) private mediacoTodoTemplate: TemplateRef<any>;
 
   constructor(
-    private todoportalService: TodoPortalService,
+    private portalService: PortalService,
     private viewContainerRef: ViewContainerRef,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
@@ -114,7 +114,7 @@ export class TodoComponent implements OnInit, OnDestroy {
     const portal = new TemplatePortal(this.mediacoTodoTemplate, this.viewContainerRef);
 
     // Set the portal in the shared service
-    this.todoportalService.setPortal(portal);
+    this.portalService.setPortal(portal);
   }
 
   ngOnDestroy() {
@@ -123,6 +123,8 @@ export class TodoComponent implements OnInit, OnDestroy {
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'updateToDo');
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_SAVED, CREATE_STAGE_SAVED);
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DELETED, CREATE_STAGE_DELETED);
+
+    this.portalService.clearPortal();
   }
 
   updateList() {
diff --git a/src/app/_samples/mediaco/services/portal.service.ts b/src/app/_samples/mediaco/services/portal.service.ts
new file mode 100644
index 00000000..f1b0d300
--- /dev/null
+++ b/src/app/_samples/mediaco/services/portal.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PortalService {
+  private portal$ = new BehaviorSubject<TemplatePortal<any> | null>(null);
+
+  /**
+   * Sets the portal that should be rendered elsewhere.
+   * @param portal The TemplatePortal to be shared.
+   */
+  setPortal(portal: TemplatePortal<any>) {
+    this.portal$.next(portal);
+  }
+
+  /**
+   * Clears the currently set portal.
+   */
+  clearPortal() {
+    this.portal$.next(null);
+  }
+
+  /**
+   * Returns the current portal as an observable.
+   */
+  getPortal() {
+    return this.portal$.asObservable();
+  }
+}
diff --git a/src/app/_samples/mediaco/services/todoportal.service.ts b/src/app/_samples/mediaco/services/todoportal.service.ts
deleted file mode 100644
index b21474de..00000000
--- a/src/app/_samples/mediaco/services/todoportal.service.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// portal.service.ts
-import { Injectable } from '@angular/core';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TodoPortalService {
-  private portalSource = new BehaviorSubject<TemplatePortal<any> | null>(null);
-
-  /**
-   * An observable that components can subscribe to, to get the portal.
-   */
-  public portal$: Observable<TemplatePortal<any> | null> = this.portalSource.asObservable();
-
-  /**
-   * Sets the portal that should be rendered elsewhere.
-   * @param portal The TemplatePortal to be shared.
-   */
-  setPortal(portal: TemplatePortal<any>) {
-    this.portalSource.next(portal);
-  }
-}