CngxBucketPaginate

DirectivePrimaryv0.1.0WCAG AA

projects/common/data/paginate/bucket-paginate.directive.ts

Import#

import { CngxBucketPaginate } from '@cngx/common/data'

Description#

Range/category pagination model - a sibling to CngxPaginate, NOT a mode flag on it. Where CngxPaginate steps a page index over a slice window, this directive partitions a collection into labelled buckets (letter ranges, date bands, price tiers) and tracks which one is active. The page-index brain stays single-responsibility; a consumer composes whichever model the data calls for (Komposition statt Konfiguration).

The empty/disabled state of every bucket is derived, never managed: a bucket is empty when no bound item matches its predicate, computed from the items / buckets inputs. There is no synced flag and no effect.

active is the two-way primary value (a model<string | null>()): null shows the unfiltered collection; a label filters to that bucket. select(label) toggles - re-selecting the active bucket clears it.

<div
  cngxBucketPaginate
  #bp="cngxBucketPaginate"
  [buckets]="letterBuckets"
  [items]="people"
  [(active)]="activeBucket"
>
  @for (p of bp.active() ? people.filter(byActiveBucket) : people; track p.id) { ... }
</div>

https://cngxjs.github.io/cngx/examples/#/ui/paginator/paginator-modes/alphabetical

Metadata#

Selector: [cngxBucketPaginate]
Export as: cngxBucketPaginate
Implements: CngxBucketPaginateHost

Providers#

CNGX_BUCKET_PAGINATE_HOST: useExisting CngxBucketPaginate

Relationships

Depends on1

CNGX_BUCKET_PAGINATE_HOSTservice

Index#

Inputs#

active#string | null

model()

Active bucket label, or null for the unfiltered collection. The two-way primary value ([(active)]); a model() because it is the directive's bindable state, not a derived read.

default null

buckets#readonly CngxBucket[]

The buckets to partition into, in render order. One chip per entry.

default []

items#readonly T[]

input()

The collection the buckets test against. Drives the derived empty state.

default []

Outputs#

active#string | null

model()

Active bucket label, or null for the unfiltered collection. The two-way primary value ([(active)]); a model() because it is the directive's bindable state, not a derived read.

Methods#

clear#void

Clear the active bucket - show the unfiltered collection.

isEmpty#boolean

isEmpty(label: string)

true when no bound item falls into the bucket.

@paramlabelstring

select#void

select(label: string)

Select the bucket, or clear the selection when it is already active (toggle). An empty bucket is a no-op - it never becomes the active filter.