Para sincronizar a paginação do back-end com o ngx-pagination no front-end, você precisará incluir informações adicionais sobre a paginação no retorno da sua API. Isso geralmente inclui informações como o número total de páginas, o número de elementos por página e o número atual da página.
Você pode adicionar essas informações na sua classe City, ou criar uma nova classe para armazenar essas informações.
Por exemplo, você pode adicionar as seguintes propriedades na sua classe City:
export interface City {
id: number,
nome: string,
uf: number,
ibge: number,
lat_lon: string,
location: string;
totalPages: number,
totalElements: number,
pageNumber: number,
size: number,
}
Em seguida, você pode modificar o método findAll()
na sua classe CityRepository
no back-end para incluir essas informações adicionais no retorno da API:
public CityDTO findAll(Pageable pageable){
Page<City> cities = cityRepository.findAll(pageable);
CityDTO cityDTO = new CityDTO();
cityDTO.setCities(cities.getContent());
cityDTO.setTotalPages(cities.getTotalPages());
cityDTO.setTotalElements(cities.getTotalElements());
cityDTO.setPageNumber(cities.getNumber());
cityDTO.setSize(cities.getSize());
return cityDTO;
}
E finalmente, você precisará modificar o método getAll()
no seu service do front-end para processar essas informações adicionais e passá-las para o componente ngx-pagination.
getAll(page: number = 0, size: number = 10): Observable<CityDTO>{
return this.http.get<CityDTO>(`${this.api}?page=${page}&size=${size}`);
}
E no componente você pode utilizar as informações da paginação retornadas para configurar o ngx-pagination.
export class CitiesComponent {
cities:City[] = []
totalPages: number;
totalElements: number;
pageNumber: number;
size: number;
constructor( private cityService: CitiesService ){
this.listar();
}
listar(page: number = 0, size: number = 10){
this.cityService.getAll(page, size).subscribe((cityDTO: CityDTO) => {
this.cities = cityDTO.cities;
this.totalPages = cityDTO.totalPages;
this.totalElements = cityDTO.totalElements;
this.pageNumber = cityDTO.pageNumber;
this.size = cityDTO.size;
});
}
pageChanged(event: any): void {
this.listar(event.page - 1, event.itemsPerPage);
}
}
Nessa parte, você está atualizando os valores das propriedades totalPages, totalElements, pageNumber e size com os valores retornados pela API. E no método pageChanged você esta passando a pagina e o numero de elementos por pagina para a listagem, e assim você pode controlar a paginação com ngx-pagination.
Espero que isso ajude a sincronizar a paginação do back-end com o ngx-pagination no front-end.