GET STARTED

Import

Import the canonical component and only the standalone template directives used by the view.

import {
  NeuralDataView,
  NeuralDataViewListItemTemplate,
  NeuralDataViewGridItemTemplate,
} from '@neural-ng/core/data-view';

@Component({ imports: [NeuralDataView, NeuralDataViewListItemTemplate,
  NeuralDataViewGridItemTemplate] })

List and grid from one collection

The header composes NeuralSelect and NeuralButton controls. DataView owns presentation, stable sorting and current-page slicing.

Deterministic local state

Local mode clones before sorting, supports nested paths such as metadata.category, preserves equal-value order and clamps paging without mutating source data.

Remote request ownership

Remote mode renders the page exactly as supplied and emits state for the application to fetch. It never sorts or slices server data.

Loading and empty states

Busy content is replaced by stable skeletons or a typed loading template. Empty content can be fully owned without losing its label context.

Six typed template surfaces

List and grid contexts infer T from their bound collection. State templates receive the configured label; header and footer remain ordinary composition surfaces.

<ng-template neuralDataViewHeader>...</ng-template>
<ng-template [neuralDataViewListItem]="products"
  let-product let-index="originalIndex" let-first="first">...</ng-template>
<ng-template [neuralDataViewGridItem]="products" let-product>...</ng-template>
<ng-template neuralDataViewLoading let-label>...</ng-template>
<ng-template neuralDataViewEmpty let-label>...</ng-template>
<ng-template neuralDataViewFooter>...</ng-template>

Identity and custom sorting

trackBy keeps DOM identity stable. sortComparator replaces value comparison while DataView still owns stable tie-breaking and sort direction.

readonly productTrackBy = (product: Product) => product.id;

readonly domainSort: NeuralDataViewSortComparator<Product> =
  (a, b, field, order) => compareDomainValues(a, b, field, order);

Unstyled and typed class slots

Headless mode removes every NeuralNg visual class while semantic structure, state, typed contexts and Paginator behavior remain.

Responsibility boundaries

Region naming

The root exposes role="region". Set a concise ariaLabel that distinguishes the collection from other regions.

Collection semantics

Both visual layouts retain role="list" and native article items with role="listitem". Grid is visual, not an interactive ARIA grid.

Loading and empty state

aria-busy appears only while loading. The fallback loading label is exposed through a status region while skeleton geometry stays hidden from assistive technology.

Interactive controls

Layout, sort and item actions must be real controls with names and state such as aria-pressed. DataView does not make an entire item clickable implicitly.

Reduced motion

Skeleton animation and item hover movement stop under prefers-reduced-motion: reduce.

Inputs and controlled models

Outputs

Template directives

Typed class slots

Types and helper

Root, header and footer

Layout and items

Loading and empty states

Paginator wrapper