Angular 7 variable in view not initialized from url query params on first load

Question

I'm new in Angular and I have problem with pass params from url to view on first load.

In my URL i have parameter page:

.../catalog?page=3

In component I have next 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 view I use ngb-pagination:

<ngb-pagination class="pagination"
                              [collectionSize]="items.total"
                              [rotate]="true"
                              [(page)]="page"
                              [maxSize]="5"
                              [pageSize]="20"
                              (pageChange)="setPage(page)"
              >
</ngb-pagination>

When I'm open/refresh link in browser .../catalog?page=3 ngb-pagination always shows me page 1 instead of 3, but next navigation works fine([page num in url and in pagination the same).

What I'm doing wrong ?

Try `this.page = +params['page']` to convert the "3" as string to number. — Maihan Nijat, Nov 28 '18 at 13:52
Thank for answers, still not working, I updated code examples. — Alex K, Nov 28 '18 at 14:01

score 0 · Answer 1 · answered Nov 28 '18 at 14:01

As answered before, you should refactor your method with the following code:

 ngOnInit(){
       this.route.queryParams.subscribe(params => {
          this.page = params['page'];
        });
     }

And there is a little trick to print what you want in the console:

console.log('my value is: ', example);

score 0 · Answer 2 · answered Nov 28 '18 at 14:18

0

<ngb-pagination [collectionSize]="total | async" 
(pageChange)="pageChanged($event)"  
[(page)]="page" aria-label="Pagination"></ngb-pagination>

you should use / pass the $event as argument instead of page

Ref : http://plnkr.co/edit/TDm5rv4RmxIKoWYWp8Qa?p=preview

answered Nov 28 '18 at 14:18

Senthil

2,156
1
14
19

Seems to be duplicate . Rer here https://stackoverflow.com/questions/41223400/how-to-implement-bootstrap-4-for-angular-2-ngb-pagination – Senthil Nov 28 '18 at 14:25

score 0 · Answer 3 · answered Nov 16 '20 at 10:37

0

You should add *ngIf directive as attribute to ngb-pagination. The code should look like this

<ngb-pagination *ngIf="total" [collectionSize]="total"...></ngb-pagination>

It worked in my case.

answered Nov 16 '20 at 10:37

Przemek

647
2
8
25

Angular 7 variable in view not initialized from url query params on first load

3 Answers3