[Fixed] Angular 8:mat pagination can not choose page

Issue

My mat-paginator in app.component.html:

<mat-paginator [pageSizeOptions]="[5, 15, 30]" [pageSize]="5" [length]="totalElements"
                      (page)="nextPage($event)">

</mat-paginator>

app component:

  totalElements = 5;

  // tslint:disable-next-line:typedef
  nextPage(event: PageEvent) {
    const request = {};
    // @ts-ignore
    request.page = event.pageIndex.toString();
    // @ts-ignore
    this.totalElements = request.size = event.pageSize.toString();
    // @ts-ignore
    this.getDevelopers(request);
  }

getDevelopers:

  public getDevelopers(request: {page: string, size: string}): void {
    this.loading = true;
    this.developerService.getAllUsers(request)
      .subscribe(data => {
        // @ts-ignore
        this.users = data.content;
        // @ts-ignore
        this.totalElements = data.totalElements;
        this.loading = false;
      }
  }

My controller:

    @GetMapping
    @ResponseBody
    @ApiOperation(value = "Get list of all developers")
    public Page<GetByIdDeveloperResponse> getAllDevelopers(
            @RequestParam(name = "page", defaultValue = "0") int page,
            @RequestParam(name = "size", defaultValue = "4") int size,
            @RequestParam(name = "sort_by", defaultValue = "id") String sortBy
    ) {
        Page<GetByIdDeveloperResponse> developers = developerMapper.getDeveloperResponseListFromDeveloperList(developerService.getAllDevelopers(page, size, sortBy));
        return new PageImpl<GetByIdDeveloperResponse>(developers.getContent(), PageRequest.of(page, size), developers.getTotalElements());
    }

I can change size of page, but i can’t open other page.
< > are not aviable for me

In postman everything in is ok, but here it doesn’t work.

How looks my service method:

    public List<Developer> getAllDevelopers(int page, int size, String sortValue) {
        logger.info("Get all developers was called, page: " + page + " size: " + size + " sort by: " + sortValue);
        Pageable paging = PageRequest.of(page, size, Sort.by(sortValue));
        Page<Developer> pagedResult = developerRepository.findAll(paging);
        return pagedResult.getContent();
    }

How repository looks:

@Repository
public interface DeveloperRepository extends PagingAndSortingRepository<Developer, String> {
    Developer findById(String id);
}

How json looks:

When i am trying to GET …/developers?size=10

I got 10 total elements, i think problem is related to "totalPages": 1,
Because even if i get all elements, there will be only 1 page

Debug:

Solution

You lose your paged result data (page number, page size, etc.) in your service method when you do return pagedResult.getContent().

Consider the following:

Service method:

public Page<Developer> getAllDevelopers(int page, int size, String sortValue) {
    logger.info("Get all developers was called, page: " + page + " size: " + size + " sort by: " + sortValue);
    Pageable paging = PageRequest.of(page, size, Sort.by(sortValue));
    return developerRepository.findAll(paging);
}

Controller method:

@GetMapping
@ApiOperation(value = "Get list of all developers")
public Page<GetByIdDeveloperResponse> getAllDevelopers(
        @RequestParam(name = "page", defaultValue = "0") int page,
        @RequestParam(name = "size", defaultValue = "4") int size,
        @RequestParam(name = "sort_by", defaultValue = "id") String sortBy
) {
    return this.developerService.getAllDevelopers(page, size, sortBy)
           .map(this.developerMapper::mapToGetByIdDeveloperResponse)
}