Structural slot directive for the card media region (images, videos, icons)
CngxCardMedia
Directivev0.1.0WCAG AA
projects/common/card/card-media.directive.ts
Import#
import { CngxCardMedia } from '@cngx/common/card'
Description#
Structural slot directive for the card media region (images, videos, icons).
When decorative is true (default), the media is hidden from screen readers
via aria-hidden. Set to false when the image carries meaningful information.
<cngx-card>
<img cngxCardMedia [decorative]="false" alt="Photo of patient" />
</cngx-card>Metadata#
Host#
Index#
Inputs#
aspectRatio#
'16/9' | '4/3' | '1/1' | 'auto'input()
Aspect ratio applied via CSS aspect-ratio property.
default
'auto'loading#
'lazy' | 'eager' | nullinput()
Native loading attribute for <img>/<iframe> hosts. Defaults to
lazy - right for below-the-fold card lists; set eager on
above-the-fold cards where lazy decoding costs LCP. null removes
the attribute (non-loadable hosts like <div> backgrounds).
default
'lazy'HostBindings#
| Binding | Expression |
|---|---|
[style.aspect-ratio] | aspectRatio() !== "auto" ? aspectRatio() : null |
[attr.aria-hidden] | decorative() || null |
[attr.loading] | loading() |