CngxSkeletonContainer
projects/ui/skeleton/skeleton-container.ts
Import#
import { CngxSkeletonContainer } from '@cngx/ui/skeleton'
Description#
Skeleton loading container with built-in placeholder repetition.
Manages CSS classes, ARIA, and reduced-motion handling internally
(same behavior as the CngxSkeleton atom directive). Adds template projection
so the consumer doesn't need @if/@for boilerplate.
- Project a
<ng-template cngxSkeletonPlaceholder>for the loading state (repeatedcounttimes). - Project content directly for the loaded state.
- Uses
display: contents- no extra DOM wrapper.
Basic usage
<cngx-skeleton [loading]="loading()" [count]="3">
<ng-template cngxSkeletonPlaceholder>
<div class="skeleton-card"></div>
</ng-template>
<app-real-content />
</cngx-skeleton>With template context (index, first, last)
<cngx-skeleton [loading]="loading()" [count]="5">
<ng-template cngxSkeletonPlaceholder let-i let-last="last">
<div class="skeleton-line" [style.width]="last ? '60%' : '100%'"></div>
</ng-template>
<p>Loaded content here</p>
</cngx-skeleton>Metadata#
Host#
Relationships
Depends on1
Index#
Inputs#
Enables the .cngx-skeleton--shimmer class (respects prefers-reduced-motion).
trueBind an async state - shows skeleton during first load. Takes precedence over loading.
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-skeleton--loading] | isLoading() |
[class.cngx-skeleton--shimmer] | showShimmer() |
[attr.aria-busy] | isLoading() || null |
Default visuals for CngxSkeleton - shimmer placeholder bones.
The host carries .cngx-skeleton and renders one or more
.cngx-skeleton-bone children. The keyframe
(cngx-skeleton-shimmer) stays top-level outside @layer
because it is already namespaced and keyframes resolve by name
regardless of cascade layer.
State modifiers
--shimmer- paints the bone with a 200% gradient sweep viacngx-skeleton-shimmerat--cngx-skeleton-shimmer-duration(default 1.5s). The animation no-ops underprefers-reduced-motion
Dark mode
Three hooks flip both the base and shimmer-sweep tones to gray-on-near-black so the sweep reads as a subtle gradient rather than a bright streak. Component-local - bones are placeholder surfaces, not delegated:
prefers-color-scheme: dark[data-color-scheme="dark"].darkclass
Pair with
@cngx/themes/material/skeleton-theme- Material 3 surface treatment
Index#
Surface
<color>oklch(0.96 0 0)Highlight color that sweeps across the bone during the shimmer animation.