injectContainerSize

Description#

Reads the nearest query container declared by a [cngxContainer] ancestor, or observes target (default: the host element) when there is none.

Use it where a component must branch structurally on the width it was given

• a different template, a focus move, an aria-modal flip. Purely visual adaptation needs no TypeScript at all: write a @container rule.

private readonly container = inject(CNGX_CONTAINER_SIZE, { optional: true });
private readonly wide = this.container?.property('--cngx-thing-wide', this.host) ?? signal('').asReadonly();
readonly mode = computed(() => (this.wide() === '1' ? 'side' : 'over'));

A component that declares the container in its own stylesheet and reads it itself passes its host explicitly and reads the property off ::after - there is no descendant to carry the value:

private readonly host = inject(ElementRef).nativeElement as Element;
private readonly container = injectContainerSize(this.host);
private readonly narrow = this.container.property('--cngx-thing-narrow', this.host, '::after');