Fix data not displaying due to zoneless change detection incompatibility

[Copilot]

Data was loading from Firebase but not rendering because the app uses zoneless change detection (provideZonelessChangeDetection()) while services used Subject/Observable patterns that don't trigger UI updates in zoneless mode.

Changes

Services: Converted from Subject<T[]> to signal<T[]>

• ContactsService and DocumentsService now use signal.set() and signal.update()
• Exposed as readonly signals via .asReadonly()

Components: Migrated to signal-based reactivity

• List components use computed() to derive signal values
• Parent components use effect() for side effects on data changes
• Templates call signals as functions: contacts() instead of contacts

Example:

// Before (Subject pattern - doesn't work with zoneless)
private contacts: Contact[] = [];
contactListChangedEvent = new Subject<Contact[]>();

getContacts() {
  this.http.get<Contact[]>(url).subscribe({
    next: (contacts) => {
      this.contacts = contacts;
      this.contactListChangedEvent.next(this.contacts.slice());  // UI won't update
    }
  });
}

// After (Signal pattern - works with zoneless)
private contacts = signal<Contact[]>([]);
contactListChangedEvent = this.contacts.asReadonly();

getContacts() {
  this.http.get<Contact[]>(url).subscribe({
    next: (contacts) => {
      this.contacts.set(contacts);  // UI updates automatically
    }
  });
}

Screenshots

Before: Empty lists despite successful data fetch

After: Data renders correctly

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• accounts.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4115 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-46559166 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9617766716996270636,8543750526166243132,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-46559166 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=46559166 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
• clients2.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4115 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-46559166 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9617766716996270636,8543750526166243132,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-46559166 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=46559166 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
• clientservices.googleapis.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4115 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-46559166 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9617766716996270636,8543750526166243132,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-46559166 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=46559166 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
• redirector.gvt1.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4115 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-46559166 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9617766716996270636,8543750526166243132,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-46559166 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=46559166 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
• safebrowsingohttpgateway.googleapis.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4115 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-46559166 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9617766716996270636,8543750526166243132,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-46559166 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=46559166 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
• www.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4115 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-46559166 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9617766716996270636,8543750526166243132,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-46559166 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=46559166 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

I need you to look at this file and find why the data is loading but not showing?

Created from VS Code via the GitHub Pull Request extension.

---

💡 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.