I'm a newcomer to Angular and facing an issue with passing parameters from the URL to the view on initial load.
My URL contains a parameter called page:
.../catalog?page=3
In my component, I have the following code:
export class CatalogListComponent implements OnInit {
page;
constructor(private route: ActivatedRoute){
}
ngOnInit(){
this.route.queryParams.subscribe(params => {
this.page = +params['page'] || 1;
});
}
setPage(page: number) {
this.router.navigate(['catalog'], { queryParams: {...this.queryParams, page } });
}
}
In the view, I am utilizing ngb-pagination:
<ngb-pagination class="pagination"
[collectionSize]="items.total"
[rotate]="true"
[(page)]="page"
[maxSize]="5"
[pageSize]="20"
(pageChange)="setPage(page)"
>
</ngb-pagination>
Whenever I open or refresh the link in the browser .../catalog?page=3, ngb-pagination always displays page 1 instead of 3, even though subsequent navigation works correctly (the page number in the URL and pagination matches).
What could be the mistake that I am making?