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:
- Infinite scrolling - Loads more data as the user scrolls
- 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
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 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. |
A promise that resolves when the item is created and added to the list.
Promise.<void>