@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIRepeater<T>

    A layout-agnostic repeater that renders a consumer-provided template for each item in a datasource.

    Accepts the same IDatasource implementations used by <ui-table-view> (e.g. ArrayDatasource, FilterableArrayDatasource, SortableArrayDatasource, RestDatasource), wrapping them in a DatasourceAdapter internally.

    The host element imposes no layout constraints — the consumer controls all styling via the template and/or CSS on the host.

    Basic usage:

    <ui-repeater [datasource]="kittens">
      <ng-template let-item let-i="index">
        <img [src]="item.url" [alt]="item.name" />
      </ng-template>
    </ui-repeater>

    With filtering:

    import { FilterableArrayDatasource } from '@theredhead/lucid-foundation';

    const ds = new FilterableArrayDatasource(items);
    ds.filterBy([{ predicate: item => item.active }]);

    With sorting:

    import { SortableArrayDatasource } from '@theredhead/lucid-foundation';

    const ds = new SortableArrayDatasource(items);
    ds.applyComparator((a, b) => a.name.localeCompare(b.name));

    Type Parameters

    • T = unknown
    Index

    Constructors

    constructor

    Properties

    ariaLabel connectedTo datasource limit reorderable reordered transferred

    Methods

    buildContext

    Constructors

    • Type Parameters

      • T = unknown

      Returns UIRepeater<T>

    Properties

    ariaLabel: InputSignal<string | undefined> = ...

    Accessible label for the repeater container.

    connectedTo: InputSignal<readonly UIRepeater<T>[]> = ...

    Other UIRepeater instances that this repeater can transfer items to/from. Pass an array of repeater references to enable cross-list drag-and-drop.

    datasource: InputSignal<IDatasource<T>> = ...

    The datasource providing items. Any IDatasource implementation is accepted.

    limit: InputSignal<number> = ...

    Maximum number of items to render at once. Defaults to Infinity (render all items). Useful when you want to show only the first N items.

    reorderable: InputSignal<boolean> = ...

    Whether items can be reordered via drag-and-drop. When true the host gains display: block and pointer-event drag handling is activated. When false (default) the repeater behaves as before (display: contents, no drag overhead).

    reordered: OutputEmitterRef<RepeaterReorderEvent> = ...

    Emitted when an item is reordered within this repeater.

    transferred: OutputEmitterRef<RepeaterTransferEvent<T>> = ...

    Emitted on the target repeater when an item is transferred from another repeater.

    Methods

    • Build template context for an item at a given index.

      Parameters

      • item: T
      • index: number

      Returns RepeaterItemContext<T>

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods