CngxResizeObserver

Observes size changes of the host element via the ResizeObserver API.

Exposes width(), height(), contentRect(), and isReady() as Angular signals that update on every resize. The observer is automatically disconnected on destroy and recreated when the box input changes.

Use cases: responsive component logic in TypeScript (not just CSS), container queries without CSS support, dynamic canvas/chart sizing, resize-aware layouts.

Display current size#

<div cngxResizeObserver #ro="cngxResizeObserver" style="resize: horizontal; overflow: auto;">
  {{ ro.width() | number:'1.0-0' }} × {{ ro.height() | number:'1.0-0' }} px
</div>

Responsive logic in TypeScript#

readonly ro = viewChild(CngxResizeObserver);
readonly columns = computed(() => (this.ro()?.width() ?? 0) > 600 ? 3 : 1);

https://cngxjs.github.io/cngx/examples/#/common/layout/resize-observer/live-size