CngxContainerSize

Interface

projects/common/layout/observers/container-size.ts

Info
API

Referenced by#

CngxContainer

Import#

import { CngxContainerSize } from '@cngx/common/layout'

Description#

Reactive read of a query container: its size, and the custom properties its @container rules resolved to.

Index#

Properties

blockSize inlineSize isReady

Methods

property

Instance Properties#

blockSize#Signal

Readonly

Border-box block size in pixels. 0 before the first observation.

inlineSize#Signal

Readonly

Border-box inline size in pixels. 0 before the first observation.

isReady#Signal

Readonly

true once the first observation has arrived.

Methods#

property#Signal

property(name: string, on?: Element, pseudo?: "::before" | "::after")

The resolved value of a custom property, re-read on every resize of the container.

The @container rule must style a descendant, never the container itself. A container query resolves against an ancestor query container of the element it styles, so a rule whose subject is the container element matches nothing and the property never changes. Pass that descendant as on; it defaults to the container host, which is only correct for properties no container query writes.

A component that is container and reader at once has no descendant to carry the value. Pass pseudo instead: the query container for a pseudo-element is selected from its originating element's inclusive ancestors, so .host::after resolves against .host while a rule on .host itself still matches nothing. No sentinel node enters the template.

.cngx-thing::after { --cngx-thing-narrow: 0; }
&#64;container cngx-thing (max-inline-size: 30rem) {
  .cngx-thing::after { --cngx-thing-narrow: 1; }
}

Returns the empty string before the first observation and in environments without layout (SSR, jsdom).

@paramnamestring

@paramon?Element

@parampseudo?"::before" | "::after"