Skip to main content
cngx-src documentation

CngxSkeletonRowTpl

Directivev0.1.0

projects/data-display/treetable/column-template.directive.ts

Import#

import { CngxSkeletonRowTpl } from '@cngx/data-display/treetable'

Description#

Marks an <ng-template> as the per-row skeleton slot rendered during the first load of a bound async state. The template repeats skeletonRowCount times and replaces the default placeholder row (toggle square plus two shimmer lines); the surrounding region stays decorative (aria-hidden), so keep the template visual-only.

The selector is cngxSkeletonRow (not cngxSkeleton) on purpose: [cngxSkeleton] is the @cngx/common/layout loading atom, and a shared attribute would instantiate both directives on the same <ng-template>.

<cngx-treetable [tree]="tree" [state]="loadState" [skeletonRowCount]="5">
  <ng-template cngxSkeletonRow let-index>
    <div class="my-shimmer-row"></div>
  </ng-template>
</cngx-treetable>

Metadata#