Documentation
Tutorials
Contributing Documentation For Developers
Test Results Test Coverage Github Repository Github Profile

Class

ListComponent

.component~ListComponent()

Constructor

# new ListComponent()

This component provides a flexible way to display lists of data with support for infinite scrolling, pagination, searching, and custom item rendering. It can fetch data from various sources including models, functions, or direct data input.

The component supports two main display types:

  1. Infinite scrolling - Loads more data as the user scrolls
  2. Pagination - Displays data in pages with navigation controls

Additional features include:

  • Pull-to-refresh functionality
  • Search filtering
  • Empty state customization
  • Custom item rendering
  • Event emission for interactions

A versatile list component that supports various data display modes.

sequenceDiagram participant U as User participant L as ListComponent participant D as Data Source participant E as External Components U->>L: Initialize component L->>L: ngOnInit() L->>D: Request initial data D-->>L: Return data L->>L: Process and display data alt User scrolls (Infinite mode) U->>L: Scroll to bottom L->>D: Request more data D-->>L: Return additional data L->>L: Append to existing data else User changes page (Paginated mode) U->>L: Click page number L->>L: handlePaginate() L->>D: Request data for page D-->>L: Return page data L->>L: Replace displayed data end alt User searches U->>L: Enter search term L->>L: handleSearch() L->>D: Filter data by search term D-->>L: Return filtered data L->>L: Update displayed data end alt User clicks item U->>L: Click list item L->>L: handleClick() L->>E: Emit clickEvent end
Implements:
  • OnInit

View Source lib/components/list/list.component.ts, line 106

Example
<ngx-decaf-list
  [source]="dataSource"
  [limit]="10"
  [type]="'infinite'"
  [showSearchbar]="true"
  (clickEvent)="handleItemClick($event)"
  (refreshEvent)="handleRefresh($event)">
</ngx-decaf-list>

Extends

  • NgxBaseComponentDirective

Methods

# async destroy() → {Promise.<void>}

Invoked by Angular teardown logic to ensure the base directive and any attached repositories stop emitting events, preventing memory leaks when the list component leaves the DOM.

The method performs the following actions:

  • Delegates to the parent directive's ngOnDestroy for shared cleanup
  • Detaches the repository observer when one is registered
  • Catches and logs repository errors to avoid bubbling failures
  • Clears internal references to large objects so they can be garbage collected

Releases component resources and unregisters repository observers.

View Source lib/components/list/list.component.ts, line 1760

Resolves when every teardown step completes.

Promise.<void>

# async protected getMapper() → {KeyValue}

Merges the component mapper with the primary key metadata and filters non-string entries so downstream rendering logic only receives valid bindings.

Produces the sanitized mapper configuration.

View Source lib/components/list/list.component.ts, line 1773

A mapper object that contains string values mapped to the component's public keys.

KeyValue

# async handleCreate(uid) → {Promise.<void>}

Handles the create event from the repository.

Handles the create event from the repository.

Parameters:
Name Type Description
uid string | number

The ID of the item to create.

View Source lib/components/list/list.component.ts, line 1869

A promise that resolves when the item is created and added to the list.

Promise.<void>