We have created the scaffolding to lay out our master/detail view. In the master outlet, we will have a paginated data table of users, so let's implement UserTableComponent
, which will contain a MatTableDataSource
property named dataSource
. We will need to be able to fetch user data in bulk using standard pagination controls like pageSize
and pagesToSkip
and be able to further narrow down the selection with user provided searchText
.
Let's start by adding the necessary functionality to the UserService
.
- Implement a new interface
IUsers
to describe the data structure of paginated data
src/app/user/user/user.service.ts
...
export interface IUsers {
items: IUser[]
total: number
}
- Add
getUsers
toUserService
src/app/user/user/user.service.ts
...
getUsers(pageSize: number, searchText = '', pagesToSkip = 0): Observable<IUsers> {
return this.httpClient.get<IUsers>(`${environment.baseUrl}/v1/users`, {
params: {
search: searchText,
offset: pagesToSkip...