# 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.

```html
<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.

[//]: # "Start of generated content"

## 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](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L28)

---

### 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](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L32)

---

### 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](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L36)

---

### 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](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L42)

---

### 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](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L49)

[//]: # "End of generated content"


---

This page was last updated at 2026-05-19T19:58:45.621Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/components/PaginatedListComponent/](https://getstream.io/chat/docs/sdk/angular/components/PaginatedListComponent/).