Class ServerConnectivityBannerComponent

Rendered height (px) of the banner, 0 while it is hidden. Published together with the --mj-connectivity-banner-height custom property on <html>.

CSS should keep using the custom property; a template binding must use this signal. A binding that reads the custom property is invisible to change detection: the height is published from the animation-done listener, which can fire while views are refreshing, so the reading view is never re-checked and dev mode reports NG0100 on every later pass (MJ #4377). Reading a signal makes the view a consumer, so the write re-refreshes it.

Connectivity state as a signal, not a plain property — and that distinction is the whole point of this shape.

The socket state that feeds IsConnected$ is reported by graphql-ws, which can announce a drop from a callback that lands inside an in-flight change-detection pass (during app startup this reliably happens after the banner's own view has been checked). Assigning a plain property there mutates state the @if was already evaluated against, so dev-mode check-no-changes reports NG0100 ... Previous value: '-1' — -1 being the @if branch index for "no branch rendered". Reading a signal from the template instead registers the view as its consumer, so a write marks the view dirty and Angular re-refreshes it within the same pass; the DOM and the expression can no longer disagree.

toSignal also owns the subscription lifetime via DestroyRef, so there is no manual Subscription to unsubscribe.