# UserListComponent

> **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 `UserListComponent` can display a list of Stream users with pagination. This can be useful if you want to build a user list in your application.

## Usage

The user list component relies on data provided by the parent component:

```html
<stream-user-list
  [users]="<list of users 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 users>"
></stream-user-list>
```

## Customization

The component is built on top of the [`PaginatedListComponent`](https://getstream.io/chat/docs/sdk/angular/v8/components/PaginatedListComponent/), you can use that component to build your own user list component.

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

## Inputs and outputs

### users

**users**: `UserResponse`[] = `[]`

The users to display

#### Defined in

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

---

### isLoading

**isLoading**: `boolean` = `false`

If `true`, the loading indicator will be displayed

#### Defined in

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

---

### hasMore

**hasMore**: `boolean` = `false`

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

#### Defined in

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

---

### 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/user-list/user-list.component.ts:30](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L30)

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

---

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