PaginatedListComponent

The PaginatedListComponent can display a list of arbitrary data with support for loading indicator and pagination. This is a utility component, you don't need to use it unless you're building a custom component.

Usage

The paginated list component relies on data provided by the parent component. You can provide the HTML template for the list items.

<stream-paginated-list
  [items]="<list of items to display>"
  [isLoading]="<set to true to display loading indicator>"
  [hasMore]="<whether or not the list has more pages to retrieve>"
  (loadMore)="<use this output to fetch the next page of items>"
>
    <ng-template let-item="item" let-index="index"
        ><div data-testid="test-item" [style.height]="height">
          {{ index }}. {{ item }}
        </div></ng-template
    >
</stream-user-list>

Customization

You can provide the HTML template for the list items, see above example.

Inputs and outputs

items

items: T[] = []

The items to display

Defined in

projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:28

isLoading

isLoading: boolean = false

If true, the loading indicator will be displayed

Defined in

projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:32

hasMore

hasMore: boolean = false

If false the component won't ask for more data vua the loadMore output

Defined in

projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:36

trackBy

trackBy: TrackByFunction<T>

The trackBy to use with the NgFor directive

Param

Defined in

projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:42

loadMore

Readonly loadMore: EventEmitter<void>

The component will signal via this output when more items should be fetched

The new items should be appended to the items array

Defined in

projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:49