@pega/angular-sdk-overrides 0.25.15 → 0.25.16

package/lib/designSystemExtension/operator/operator.component.ts

@@ -112,7 +112,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
         ];
 
         this.bShowPopover$ = true;
-        this.cdRef.detectChanges();
+        this.cdRef.markForCheck();
       } else {
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${this.id$}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
@@ -144,6 +144,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
             value: fillerString
           }
         ];
+        this.cdRef.markForCheck();
       }
     });
   }

package/lib/infra/Containers/flow-container/flow-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, forwardRef, OnDestroy, Injector } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, Injector } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
@@ -75,7 +75,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private fb: FormBuilder,
-    private ngZone: NgZone,
     private utils: Utils
   ) {
     super(injector);
@@ -123,6 +122,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       'clearBannerMessages',
       () => {
         this.banners = [];
+        this.cdRef.markForCheck();
       },
       'clearBannerMessages'
     );
@@ -188,10 +188,9 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   }
 
   showPageMessages(completeProps: FlowContainerProps) {
-    this.ngZone.run(() => {
-      const pageMessages = completeProps.pageMessages;
-      this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
-    });
+    const pageMessages = completeProps.pageMessages;
+    this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
+    this.cdRef.markForCheck();
   }
 
   getTodoVisibilty() {
@@ -388,8 +387,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const { CASE_INFO: CASE_CONSTS } = PCore.getConstants();
 
     setTimeout(() => {
-      this.ngZone.run(() => {
-        /*
+      /*
           *** renove this commmented out code when React/WC is updated
           *** this code is replace with the call to "getToDoAssigments" function below
 
@@ -407,32 +405,32 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
           const caseActions = localPConn.getValue(CASE_CONSTS.CASE_INFO_ACTIONS);
           */
 
-        const todoAssignments = getToDoAssignments(this.pConn$);
+      const todoAssignments = getToDoAssignments(this.pConn$);
 
-        if (todoAssignments && todoAssignments.length > 0) {
-          this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
-          this.todo_datasource$ = { source: todoAssignments };
-        }
+      if (todoAssignments && todoAssignments.length > 0) {
+        this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
+        this.todo_datasource$ = { source: todoAssignments };
+      }
 
-        /* remove this commented out code when update React/WC */
-        // let kid = this.pConn$.getChildren()[0];
+      /* remove this commented out code when update React/WC */
+      // let kid = this.pConn$.getChildren()[0];
 
-        // kid.getPConnect() can be a Reference component. So normalize it just in case
-        //        let todoKid = kid.getPConnect().getChildren()[0];
+      // kid.getPConnect() can be a Reference component. So normalize it just in case
+      //        let todoKid = kid.getPConnect().getChildren()[0];
 
-        //        this.todo_pConn$ = todoKid.getPConnect();
+      //        this.todo_pConn$ = todoKid.getPConnect();
 
-        /* code change here to note for React/WC  */
-        // todo now needs pConn to open the work item on click "go"
-        this.todo_pConn$ = this.pConn$;
+      /* code change here to note for React/WC  */
+      // todo now needs pConn to open the work item on click "go"
+      this.todo_pConn$ = this.pConn$;
 
-        // still needs the context of the original work item
-        this.todo_context$ = localPConn.getContextName();
+      // still needs the context of the original work item
+      this.todo_context$ = localPConn.getContextName();
 
-        this.todo_showTodo$ = true;
+      this.todo_showTodo$ = true;
 
-        this.psService.sendMessage(false);
-      });
+      this.psService.sendMessage(false);
+      this.cdRef.markForCheck();
     });
   }
 
@@ -537,24 +535,19 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const normalizedConfigObjectAsPConnect = normalizedConfigObject.getComponent();
 
     // makes sure Angular tracks these changes
-    this.ngZone.run(() => {
-      this.buildName$ = this.getBuildName();
-      // what comes back now in configObject is the children of the flowContainer
+    this.buildName$ = this.getBuildName();
+    // what comes back now in configObject is the children of the flowContainer
 
-      this.arChildren$ = [];
-      this.arChildren$.push(normalizedConfigObjectAsPConnect);
+    this.arChildren$ = [];
+    this.arChildren$.push(normalizedConfigObjectAsPConnect);
 
-      this.psService.sendMessage(false);
+    this.psService.sendMessage(false);
 
-      const oWorkItem = configObject.getPConnect();
-      const oWorkData: any = oWorkItem.getDataObject();
+    const oWorkItem = configObject.getPConnect();
+    const oWorkData: any = oWorkItem.getDataObject();
 
-      this.containerName$ = this.localizedVal(
-        this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name,
-        undefined,
-        this.localeReference
-      );
-    });
+    this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name, undefined, this.localeReference);
+    this.cdRef.markForCheck();
   }
 
   getBuildName(): string {

package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, Output, EventEmitter, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import isEqual from 'fast-deep-equal';
@@ -59,7 +59,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private fb: FormBuilder
   ) {
@@ -214,46 +214,45 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     if (newComp && caseInfo && this.compareCaseInfoIsDifferent(caseInfo)) {
       this.psService.sendMessage(false);
 
-      this.ngZone.run(() => {
-        this.createdViewPConn$ = newComp;
-        const newConfigProps = newComp.getConfigProps();
-        this.templateName$ = 'template' in newConfigProps ? (newConfigProps.template as string) : '';
-
-        const { actionName } = latestItem;
-        const theNewCaseInfo = newComp.getCaseInfo();
-        // const caseName = theNewCaseInfo.getName();
-        const ID = theNewCaseInfo.getBusinessID() || theNewCaseInfo.getID();
-
-        const caseTypeName = theNewCaseInfo.getCaseTypeName();
-        const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
-        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
-        this.isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
-        this.context$ = latestItem.context;
-        this.title$ =
-          isDataObject || this.isMultiRecord
-            ? this.getModalHeading(dataObjectAction)
-            : this.determineModalHeaderByAction(actionName, caseTypeName, ID, this.createdViewPConn$?.getCaseLocaleReference());
-
-        const bIsRefComponent = this.checkIfRefComponent(newComp);
-
-        if (bIsRefComponent) {
-          this.arChildren$ = [newComp.getComponent()];
-        } else {
-          // update children with new view's children
-          this.arChildren$ = newComp.getChildren();
-        }
+      this.createdViewPConn$ = newComp;
+      const newConfigProps = newComp.getConfigProps();
+      this.templateName$ = 'template' in newConfigProps ? (newConfigProps.template as string) : '';
+
+      const { actionName } = latestItem;
+      const theNewCaseInfo = newComp.getCaseInfo();
+      // const caseName = theNewCaseInfo.getName();
+      const ID = theNewCaseInfo.getBusinessID() || theNewCaseInfo.getID();
+
+      const caseTypeName = theNewCaseInfo.getCaseTypeName();
+      const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
+      const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
+      this.isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
+      this.context$ = latestItem.context;
+      this.title$ =
+        isDataObject || this.isMultiRecord
+          ? this.getModalHeading(dataObjectAction)
+          : this.determineModalHeaderByAction(actionName, caseTypeName, ID, this.createdViewPConn$?.getCaseLocaleReference());
+
+      const bIsRefComponent = this.checkIfRefComponent(newComp);
+
+      if (bIsRefComponent) {
+        this.arChildren$ = [newComp.getComponent()];
+      } else {
+        // update children with new view's children
+        this.arChildren$ = newComp.getChildren();
+      }
 
-        this.bShowModal$ = true;
+      this.bShowModal$ = true;
 
-        // for when non modal
-        this.modalVisibleChange.emit(this.bShowModal$);
+      // for when non modal
+      this.modalVisibleChange.emit(this.bShowModal$);
 
-        // save off itemKey to be used for finishAssignment, etc.
-        this.itemKey$ = key;
+      // save off itemKey to be used for finishAssignment, etc.
+      this.itemKey$ = key;
 
-        // cause a change for assignment
-        this.updateToken$ = new Date().getTime();
-      });
+      // cause a change for assignment
+      this.updateToken$ = new Date().getTime();
+      this.cdRef.markForCheck();
     }
   }
 
@@ -263,14 +262,13 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
       // should put here
     }
 
-    this.ngZone.run(() => {
-      this.bShowModal$ = false;
+    this.bShowModal$ = false;
 
-      // for when non modal
-      this.modalVisibleChange.emit(this.bShowModal$);
+    // for when non modal
+    this.modalVisibleChange.emit(this.bShowModal$);
 
-      this.oCaseInfo = {};
-    });
+    this.oCaseInfo = {};
+    this.cdRef.markForCheck();
   }
 
   getConfigObject(item, pConnect, isReverseCoexistence = false) {
@@ -331,10 +329,9 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     */
     if (latestItem && isModalAction && !this.actionsDialog) {
       const configObject = this.getConfigObject(latestItem, this.pConn$);
-      this.ngZone.run(() => {
-        this.cancelPConn$ = configObject?.getPConnect();
-        this.bShowCancelAlert$ = true;
-      });
+      this.cancelPConn$ = configObject?.getPConnect();
+      this.bShowCancelAlert$ = true;
+      this.cdRef.markForCheck();
     }
   }
 
@@ -398,13 +395,12 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
 
   closeActionsDialog = () => {
     this.actionsDialog = true;
-    // this.ngZone.run(() => {
     this.bShowModal$ = false;
 
     // for when non modal
     this.modalVisibleChange.emit(this.bShowModal$);
 
     this.oCaseInfo = {};
-    // });
+    this.cdRef.markForCheck();
   };
 }

package/lib/infra/Containers/view-container/view-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -56,7 +56,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -201,23 +201,22 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
           //  ViewContainer HTML template to guide what's rendered similar to what
           //  the Nebula/Constellation return of React.Fragment does
 
-          this.ngZone.run(() => {
-            if (newComp.getComponentName() === 'reference') {
-              // if a refernece, it will de reference to a "view"
-              // so hand this off to the "View" component to do that
-              this.isViewContainer$ = false;
-              this.viewPConn$ = newComp;
+          if (newComp.getComponentName() === 'reference') {
+            // if a refernece, it will de reference to a "view"
+            // so hand this off to the "View" component to do that
+            this.isViewContainer$ = false;
+            this.viewPConn$ = newComp;
 
-              /*
-               ***  this commmented out code should be removed, once we test out that
-               ***  handing off refernce to View component always works
-               */
+            /*
+             ***  this commmented out code should be removed, once we test out that
+             ***  handing off refernce to View component always works
+             */
 
-              // When newComp is a reference, we want to de-reference
-              //  it (to get the View) and then use that View to get the
-              //  template, title, children, etc.
+            // When newComp is a reference, we want to de-reference
+            //  it (to get the View) and then use that View to get the
+            //  template, title, children, etc.
 
-              /*
+            /*
 
               const theDereferencedView = newComp;
               const newConfigProps = theDereferencedView.getConfigProps();
@@ -230,20 +229,20 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
               this.arChildren$ = theDereferencedViewChildren;
               this.createdViewPConn$ = theDereferencedView;
               */
-            } else {
-              // old style when newComp is NOT a 'reference'
-              this.isViewContainer$ = true;
-
-              console.error(`ViewContainer has a newComp that is NOT a reference!`);
-
-              this.createdViewPConn$ = newComp;
-              const newConfigProps = newComp.getConfigProps();
-              this.templateName$ = newConfigProps.template || '';
-              this.title$ = newConfigProps.title || '';
-              // update children with new view's children
-              this.arChildren$ = newComp.getChildren();
-            }
-          });
+          } else {
+            // old style when newComp is NOT a 'reference'
+            this.isViewContainer$ = true;
+
+            console.error(`ViewContainer has a newComp that is NOT a reference!`);
+
+            this.createdViewPConn$ = newComp;
+            const newConfigProps = newComp.getConfigProps();
+            this.templateName$ = newConfigProps.template || '';
+            this.title$ = newConfigProps.title || '';
+            // update children with new view's children
+            this.arChildren$ = newComp.getChildren();
+          }
+          this.cdRef.markForCheck();
         }
       }
     }

package/lib/infra/defer-load/defer-load.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -35,7 +35,10 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   PAGE: any;
   DATA: any;
   lastUpdateCaseTime;
-  constructor(private angularPConnect: AngularPConnectService) {
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private cdRef: ChangeDetectorRef
+  ) {
     this.constants = PCore.getConstants();
   }
 
@@ -132,7 +135,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         PCore.getDeferLoadManager().stop(this.deferLoadId, this.pConn$.getContextName());
       }
     }
-    // this.cdRef.detectChanges();
+    this.cdRef.detectChanges();
   }
 
   loadActiveTab() {

package/lib/infra/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
@@ -53,7 +53,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -104,40 +103,39 @@ export class NavbarComponent implements OnInit, OnDestroy {
   }
 
   initComponent() {
-    this.ngZone.run(() => {
-      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
-
-      // Then, continue on with other initialization
-
-      // making a copy, so can add info
-      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
-      // @ts-ignore
-      const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || this.pConn$.getValue('.pyLocaleReference');
-      this.navPages$.forEach(page => {
-        const destinationObject: any = {};
-        this.pConn$.resolveConfigProps(
-          { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
-          destinationObject
-        );
-        page.name = this.localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
-        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
-      });
-      this.actionsAPI = this.pConn$.getActionsApi();
-      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
-      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
-      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as NavBarProps;
-      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
-
-      // const oData = this.pConn$.getDataObject();
-
-      this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-      this.showAppName$ = this.configProps$.showAppName;
-
-      this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+
+    // Then, continue on with other initialization
+
+    // making a copy, so can add info
+    this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+    // @ts-ignore
+    const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || this.pConn$.getValue('.pyLocaleReference');
+    this.navPages$.forEach(page => {
+      const destinationObject: any = {};
+      this.pConn$.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      page.name = this.localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
     });
+    this.actionsAPI = this.pConn$.getActionsApi();
+    this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+    this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as NavBarProps;
+    this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+
+    // const oData = this.pConn$.getDataObject();
+
+    this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
+    this.showAppName$ = this.configProps$.showAppName;
+
+    this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    this.chRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

package/lib/infra/root-container/root-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { interval, Subscription } from 'rxjs';
@@ -56,7 +56,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -137,18 +137,16 @@ export class RootContainerComponent implements OnInit, OnDestroy {
           });
 
           setTimeout(() => {
-            // makes sure Angular tracks these changes
-            this.ngZone.run(() => {
-              const theNewPConn = rootObject.getPConnect();
-              // update ComponentName$ before we update pConn$ to make sure they're in sync
-              //  when rendering...
-              this.componentName$ = theNewPConn.getComponentName();
-
-              this.pConn$ = theNewPConn;
-              // this.pConn$ = rootObject.getPConnect();
-
-              console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
-            });
+            const theNewPConn = rootObject.getPConnect();
+            // update ComponentName$ before we update pConn$ to make sure they're in sync
+            //  when rendering...
+            this.componentName$ = theNewPConn.getComponentName();
+
+            this.pConn$ = theNewPConn;
+            // this.pConn$ = rootObject.getPConnect();
+
+            console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
+            this.cdRef.markForCheck();
           });
         }
       }
@@ -187,24 +185,23 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     if (arChildren && arChildren.length == 1) {
       // have to have a quick timeout or get an "expressions changed" angular error
       setTimeout(() => {
-        this.ngZone.run(() => {
-          const localPConn = arChildren[0].getPConnect();
-
-          this.componentName$ = localPConn.getComponentName();
-          if (this.componentName$ === 'ViewContainer') {
-            const configProps = this.pConn$.getConfigProps();
-            const viewContConfig = {
-              meta: {
-                type: 'ViewContainer',
-                config: configProps
-              },
-              options
-            };
-
-            this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
-          }
-          this.bShowRoot$ = true;
-        });
+        const localPConn = arChildren[0].getPConnect();
+
+        this.componentName$ = localPConn.getComponentName();
+        if (this.componentName$ === 'ViewContainer') {
+          const configProps = this.pConn$.getConfigProps();
+          const viewContConfig = {
+            meta: {
+              type: 'ViewContainer',
+              config: configProps
+            },
+            options
+          };
+
+          this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
+        }
+        this.bShowRoot$ = true;
+        this.cdRef.markForCheck();
       });
     }
   }
@@ -222,9 +219,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
               console.log(ex);
             }
 
-            this.ngZone.run(() => {
-              this.bIsProgress$ = true;
-            });
+            this.bIsProgress$ = true;
+            this.cdRef.markForCheck();
           });
         }
       }
@@ -236,9 +232,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
       // don't touch bIsProgress$ unless differnent
       if (bShow != this.bIsProgress$) {
         // makes sure Angular tracks these changes
-        this.ngZone.run(() => {
-          this.bIsProgress$ = bShow;
-        });
+        this.bIsProgress$ = bShow;
+        this.cdRef.markForCheck();
       }
     }
   }

package/lib/infra/view/view.component.ts

@@ -3,10 +3,22 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
-import { getAllFields } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
-const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails',
+  'Confirmation',
+  'DynamicTabs',
+  'DetailsSubTabs',
+  'ListView'
+];
+
 const DETAILS_TEMPLATES = [
   'Details',
   'DetailsFields',
@@ -157,7 +169,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.showLabel$ =
       this.inheritedProps$.showLabel !== undefined
         ? this.inheritedProps$.showLabel
-        : this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
+        : (this.configProps$.showLabel ?? isDetailsTemplate(this.templateName$));
     this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 
@@ -183,39 +195,6 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     // console.log("-->view update: " + this.angularPConnect.getComponentID(this) + ", template: " + this.templateName$ + ", kids: " + kidList);
   }
 
-  // JA - adapting additionalProps from Nebula/Constellation version which uses static methods
-  //    on the component classes stored in PComponents (that Angular doesn't have)...
-  additionalProps(state: any, getPConnect: any) {
-    let propObj = {};
-
-    // We already have the template name in this.templateName$
-    if (this.templateName$ !== '') {
-      let allFields = {};
-
-      // These uses are adapted from Nebula/Constellation CaseSummary.additionalProps
-      switch (this.templateName$) {
-        case 'CaseSummary':
-          allFields = getAllFields(getPConnect);
-          // eslint-disable-next-line no-case-declarations
-          const unresFields = {
-            primaryFields: allFields[0],
-            secondaryFields: allFields[1]
-          };
-          propObj = getPConnect.resolveConfigProps(unresFields);
-          break;
-
-        case 'Details':
-          allFields = getAllFields(getPConnect);
-          propObj = { fields: allFields[0] };
-          break;
-        default:
-          break;
-      }
-    }
-
-    return propObj;
-  }
-
   ngOnDestroy(): void {
     if (this.angularPConnectData.unsubscribeFn) {
       this.angularPConnectData.unsubscribeFn();

package/lib/template/app-shell/app-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
@@ -59,7 +59,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private erService: ErrorMessagesService,
     private snackBar: MatSnackBar,
-    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef,
     private utils: Utils
   ) {}
 
@@ -152,17 +152,15 @@ export class AppShellComponent implements OnInit, OnDestroy {
     const portalClass = this.pConn$.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
     const envPortalName = envInfo.getPortalName();
 
-    this.ngZone.run(() => {
-      // making a copy, so can add info
-      this.pages$ = this.configProps$.pages;
+    // making a copy, so can add info
+    this.pages$ = this.configProps$.pages;
 
-      if (this.pages$) {
-        this.bShowAppShell$ = true;
-      }
+    if (this.pages$) {
+      this.bShowAppShell$ = true;
+    }
 
-      this.caseTypes$ = this.configProps$.caseTypes;
-      this.arChildren$ = this.pConn$.getChildren();
-    });
+    this.caseTypes$ = this.configProps$.caseTypes;
+    this.arChildren$ = this.pConn$.getChildren();
 
     const portalLogo = this.configProps$.portalLogo;
     // using the default icon then fetch it from the static folder (not auth involved)
@@ -181,12 +179,14 @@ export class AppShellComponent implements OnInit, OnDestroy {
         .getSvcImageUrl(portalLogo)
         .then(data => {
           this.imageURL = data;
+          this.cdRef.markForCheck();
         })
         .catch(() => {
           console.error(`${this.localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
     this.appName$ = this.localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase());
+    this.cdRef.markForCheck();
   }
 
   // fpr show/hiding error messages in the SnackBar component
@@ -244,5 +244,6 @@ export class AppShellComponent implements OnInit, OnDestroy {
       default:
         break;
     }
+    this.cdRef.markForCheck();
   }
 }

package/lib/template/base/details-template-base.ts

@@ -10,6 +10,7 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
   // For interaction with AngularPConnect
   protected angularPConnectData: AngularPConnectData = {};
   protected angularPConnect;
+  propsToUse: any = {};
 
   childrenMetadataOld;
 
@@ -67,6 +68,11 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
     });
   }
 
+  updateDetailsProps() {
+    const { label, showLabel } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+  }
+
   processDetailFields(kid: any): any[] {
     const pKid = kid.getPConnect();
     const fields = pKid.getChildren();
@@ -100,9 +106,12 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
           pConn: theViewCont?.getPConnect()
         });
       } else {
+        thePConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+        thePConn.setInheritedProp('readOnly', true);
         processedFields.push({
           type: theCompType,
-          config: thePConn.getConfigProps()
+          config: thePConn.getConfigProps(),
+          pConn: thePConn
         });
       }
     });

package/lib/template/case-summary/case-summary.component.ts

@@ -3,6 +3,7 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
+import { getAllFields } from '@pega/angular-sdk-components';
 
 interface CaseSummaryProps {
   // If any, enter additional props that only exist on this component
@@ -73,7 +74,20 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseSummaryProps;
     this.generatePrimaryAndSecondaryFields();
+    this.status$ = this.configProps$.status;
+    this.bShowStatus$ = this.configProps$.showStatus;
+  }
+
+  additionalProps() {
+    const allFields = getAllFields(this.pConn$);
+    const fields = {
+      primaryFields: allFields[0],
+      secondaryFields: allFields[1]
+    };
+
+    return this.pConn$.resolveConfigProps(fields);
   }
 
   ngOnChanges() {

package/lib/template/details/details.component.html

@@ -1,3 +1,11 @@
-<div>
-  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
-</div>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
+  ></component-mapper>
+</ng-template>

package/lib/template/details/details.component.ts

@@ -16,6 +16,7 @@ export class DetailsComponent extends DetailsTemplateBase {
   arFields$: any[] = [];
 
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/lib/template/details-narrow-wide/details-narrow-wide.component.html

@@ -1,4 +1,11 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+  ></component-mapper>
+</ng-template>

package/lib/template/details-narrow-wide/details-narrow-wide.component.ts

@@ -17,6 +17,7 @@ export class DetailsNarrowWideComponent extends DetailsTemplateBase {
   showHighlightedData: boolean;
 
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/lib/template/details-one-column/details-one-column.component.html

@@ -1 +1,11 @@
-<component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
+  ></component-mapper>
+</ng-template>

package/lib/template/details-one-column/details-one-column.component.ts

@@ -17,6 +17,7 @@ export class DetailsOneColumnComponent extends DetailsTemplateBase {
   arFields$: any[] = [];
 
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/lib/template/details-three-column/details-three-column.component.html

@@ -1,4 +1,17 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arFields3$, arHighlightedFields: highlightedDataArr, layout: 'three-column' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{
+      arFields$: arFields$,
+      arFields2$: arFields2$,
+      arFields3$: arFields3$,
+      arHighlightedFields: highlightedDataArr,
+      layout: 'three-column'
+    }"
+  ></component-mapper>
+</ng-template>

package/lib/template/details-three-column/details-three-column.component.ts

@@ -18,9 +18,8 @@ export class DetailsThreeColumnComponent extends DetailsTemplateBase {
   arFields2$: any[] = [];
   arFields3$: any[] = [];
 
-  propsToUse: any = {};
-
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/lib/template/details-two-column/details-two-column.component.html

@@ -1,4 +1,11 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
+  ></component-mapper>
+</ng-template>

package/lib/template/details-two-column/details-two-column.component.ts

@@ -18,9 +18,8 @@ export class DetailsTwoColumnComponent extends DetailsTemplateBase {
   arFields2$: any[] = [];
   arFields3$: any[] = [];
 
-  propsToUse: any = {};
-
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/lib/template/details-wide-narrow/details-wide-narrow.component.html

@@ -1,4 +1,11 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'wide-narrow' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'wide-narrow' }"
+  ></component-mapper>
+</ng-template>

package/lib/template/details-wide-narrow/details-wide-narrow.component.ts

@@ -15,9 +15,8 @@ export class DetailsWideNarrowComponent extends DetailsTemplateBase {
   showHighlightedData: boolean;
   arFields$: any[] = [];
   arFields2$: any[] = [];
-  propsToUse: any = {};
-
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/lib/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
@@ -52,7 +52,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -102,30 +101,29 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   }
 
   initComponent() {
-    this.ngZone.run(() => {
-      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+    this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
 
-      // Then, continue on with other initialization
+    // Then, continue on with other initialization
 
-      // making a copy, so can add info
-      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+    // making a copy, so can add info
+    this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
 
-      this.navPages$.forEach(page => {
-        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
-      });
+    this.navPages$.forEach(page => {
+      page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
+    });
 
-      this.actionsAPI = this.pConn$.getActionsApi();
-      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
-      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
-      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as WssNavBarProps;
-      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+    this.actionsAPI = this.pConn$.getActionsApi();
+    this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+    this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as WssNavBarProps;
+    this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
 
-      // const oData = this.pConn$.getDataObject();
+    // const oData = this.pConn$.getDataObject();
 
-      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-    });
+    this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
+    this.cdRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

package/lib/widget/attachment/attachment.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -76,7 +76,8 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -96,6 +97,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
         PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
         () => {
           this.overrideLocalState = true;
+          this.cdRef.markForCheck();
         },
         this.caseID
       );
@@ -336,6 +338,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
       return localFile;
     });
+    this.cdRef.markForCheck();
   }
 
   populateErrorAndUpdateRedux(file) {

package/lib/widget/case-history/case-history.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Utils } from '@pega/angular-sdk-components';
@@ -23,7 +23,10 @@ export class CaseHistoryComponent implements OnInit {
   displayedColumns$ = Array<any>();
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -54,6 +57,7 @@ export class CaseHistoryComponent implements OnInit {
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
       this.waitingForData = false;
+      this.cdRef.markForCheck();
     });
   }
   // This method isn't being used anywhere, keeping it as a reference for now

package/lib/widget/file-utility/file-utility.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
@@ -74,7 +74,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -273,9 +273,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       for (let fileIndex = 0; fileIndex < arFileList.length; fileIndex++) {
         if (arFileList[fileIndex].id == itemId) {
           // remove the file from the list and redraw
-          this.ngZone.run(() => {
-            arFileList.splice(fileIndex, 1);
-          });
+          arFileList.splice(fileIndex, 1);
+          this.cdRef.markForCheck();
           break;
         }
       }
@@ -293,9 +292,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
           // remove the file from the list and redraw
           localLinksList.splice(linkIndex, 1);
 
-          this.ngZone.run(() => {
-            this.arLinksList$ = localLinksList.slice();
-          });
+          this.arLinksList$ = localLinksList.slice();
+          this.cdRef.markForCheck();
 
           break;
         }
@@ -482,24 +480,23 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     oLink.primary.icon = 'open';
     oLink.secondary.text = url;
 
-    this.ngZone.run(() => {
-      // need to create a new array or summary list won't detect changes
-      this.arLinksList$ = localList.slice();
-      this.arLinksList$.push(oLink);
+    // need to create a new array or summary list won't detect changes
+    this.arLinksList$ = localList.slice();
+    this.arLinksList$.push(oLink);
 
-      // list for actually attachments
-      const link: any = {};
-      link.id = oLink.id;
-      link.linkTitle = this.link_title$;
-      link.type = oLink.type;
-      link.url = url;
+    // list for actually attachments
+    const link: any = {};
+    link.id = oLink.id;
+    link.linkTitle = this.link_title$;
+    link.type = oLink.type;
+    link.url = url;
 
-      this.arLinks$.push(link);
+    this.arLinks$.push(link);
 
-      // clear values
-      this.link_title$ = '';
-      this.link_url$ = '';
-    });
+    // clear values
+    this.link_title$ = '';
+    this.link_url$ = '';
+    this.cdRef.markForCheck();
   }
 
   _changeTitle(event: any) {
@@ -575,15 +572,13 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   createModal(modalType: string) {
     switch (modalType) {
       case 'addLocalFile':
-        this.ngZone.run(() => {
-          this.bShowFileModal$ = true;
-        });
+        this.bShowFileModal$ = true;
+        this.cdRef.markForCheck();
 
         break;
       case 'addLocalLink':
-        this.ngZone.run(() => {
-          this.bShowLinkModal$ = true;
-        });
+        this.bShowLinkModal$ = true;
+        this.cdRef.markForCheck();
         break;
       default:
         break;
@@ -716,6 +711,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
         })
         .finally(() => {
           this.lu_bLoading$ = false;
+          this.cdRef.markForCheck();
         });
     }
   }

package/lib/widget/todo/todo.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
@@ -97,7 +97,8 @@ export class TodoComponent implements OnInit, OnDestroy {
   constructor(
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private utils: Utils
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -167,6 +168,7 @@ export class TodoComponent implements OnInit, OnDestroy {
   deferLoadWorklistItems(responseData) {
     this.count = responseData.totalCount;
     this.arAssignments$ = responseData.data;
+    this.cdRef.markForCheck();
   }
 
   getID(assignment: any) {
@@ -221,6 +223,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, this.count, false, this.context$).then(
         response => {
           this.arAssignments$ = response.data;
+          this.cdRef.markForCheck();
         }
       );
     } else {
@@ -268,6 +271,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       .openAssignment(id, classname, options)
       .then(() => {
         this.psService.sendMessage(false);
+        this.cdRef.markForCheck();
         if (this.bLogging) {
           console.log(`openAssignment completed`);
         }
@@ -275,6 +279,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       .catch(() => {
         this.psService.sendMessage(false);
         this.erService.sendMessage('show', 'Failed to open');
+        this.cdRef.markForCheck();
       });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.25.15",
+  "version": "0.25.16",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"