Skip to main content
Version: v5

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

Did you find this page helpful?