Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError in EformsPageComponent

[Copilot]

• Review angular19 branch code structure (standalone component with Angular 21)
• Apply ChangeDetectorRef fix to eforms-page.component.ts
• Verify the fix is appropriate for Angular 21 standalone components
• Commit and push changes

Summary

Successfully fixed the NG0100 ExpressionChangedAfterItHasBeenCheckedError on the angular19 branch.

The Problem

The error occurred when loading the eforms page:

ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. Previous value: '[]'. Current value: '[...]'
Expression location: EformsPageComponent

Root Cause

The templateListModel.templates property was being updated asynchronously during component initialization (in the loadAllTemplates() subscription), after Angular's change detection had already completed its check.

The Fix

Applied minimal, surgical changes to eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.ts:

1. Line 1: Added ChangeDetectorRef to imports from '@angular/core'
2. Line 81: Injected ChangeDetectorRef: private cdr = inject(ChangeDetectorRef)
3. Line 167: Called this.cdr.detectChanges() after updating templateListModel

loadAllTemplates() {
  this.loadAllTemplatesSub$ = this.eformsStateService.loadAllTemplates()
    .subscribe((operation) => {
      if (operation && operation.success) {
        this.templateListModel = operation.model;
        this.cdr.detectChanges(); // ← Manually trigger change detection
      }
    });
}

Compatibility

This fix is fully compatible with:

• Angular 21 (used in angular19 branch)
• Standalone components
• Modern inject() function for dependency injection

The manual change detection trigger ensures Angular re-checks bindings after the async data load completes, eliminating the expression changed error.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Branch: angular19 - Fixing eerror</issue_title>
<issue_description>On the angular19 branch which is updated to have these errors when loading:

ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[]'. Current value: '[{"id":1,"createdAt":"2026-01-29T06:50:55.000Z","updatedAt":null,"label":"sfsfdsf","description":null,"repeated":1,"folderName":null,"workflowState":"created","deployedSites":[],"hasCases":false,"disp…'. Expression location: EformsPageComponent2 component. Find more at https://v21.angular.dev/errors/NG0100
    at throwErrorIfNoChangesMode (_debug_node-chunk.mjs:3475:9)
    at bindingUpdated (_debug_node-chunk.mjs:7918:9)
    at Module.ɵɵproperty (_debug_node-chunk.mjs:14300:7)
    at EformsPageComponent_Template (eforms-page.component.html:98:3)
```</issue_description>

<agent_instructions>Use the branch angular19 as base and make the PR against the angular19 branch</agent_instructions>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

• Fixes Branch: angular19 - Fixing eerror #7484

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}