# PaginatedListComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

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>{{ index }}. {{ item }}</div>
  </ng-template>
</stream-paginated-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

[lib/paginated-list/paginated-list.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/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

[lib/paginated-list/paginated-list.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/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 via the `loadMore` output

#### Defined in

[lib/paginated-list/paginated-list.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/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

[lib/paginated-list/paginated-list.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/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

[lib/paginated-list/paginated-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L51)

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

---

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