Skip to content
@platform/sdk

Make the SDK update zoneless Angular

Zoneless change detection (provideZonelessChangeDetection(), increasingly the Angular default) has no zone.js to notice the SDK’s postMessage callbacks. When a session.changed event or a theme change arrives, nothing tells Angular to re-render.

The fix is one rule: bridge every SDK callback into a signal. Writing the signal is the change-detection trigger. Read platform state through these signals everywhere; never cache it or read the client directly in a template.

platform-store.ts
import { Injectable, inject, signal } from "@angular/core";
import type { Session, ThemeInfo } from "@platform/sdk";
import { PLATFORM } from "../shared/platform.token";


// Making the SDK update a zoneless app. With provideZonelessChangeDetection() there is no zone.js to
// notice the SDK's postMessage callbacks, so bridge them into signals: the signal write is the sole
// change-detection trigger. Components must read state through these signals, never cache it.
@Injectable({ providedIn: "root" })
export class PlatformStore {
  private readonly platform = inject(PLATFORM);
  private readonly _session = signal<Session>(this.platform.session);
  private readonly _theme = signal<ThemeInfo>(this.platform.theme);
  readonly session = this._session.asReadonly();
  readonly theme = this._theme.asReadonly();


  constructor() {
    this.platform.subscribe<Session>("session.changed", (s) => this._session.set(s));
    this.platform.onThemeChange((t) => this._theme.set(t));
  }
}

Inject PlatformStore and read store.session() / store.theme() in your components. Because the callbacks write signals, a delivered event repaints the affected views with no zone, no ChangeDetectorRef, and no manual markForCheck.

See also

Section titled “See also”