UserListComponent

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:

<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, you can use that component to build your own user list component.

Inputs and outputs

users

users: UserResponse<DefaultStreamChatGenerics>[] = []

The users to display

Defined in

projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:17

isLoading

isLoading: boolean = false

If true, the loading indicator will be displayed

Defined in

projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:21

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/user-list/user-list.component.ts:25

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/user-list/user-list.component.ts:31