Skip to main content
Version: v5

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

Did you find this page helpful?