I have a list-ponent where I want to keep the pageIndex value by setting some variables in another class just before navigating to another ponent let's say x-ponent. Then, when navigating back to the list-ponent, I want to get the previously set pageIndex so that open that page instead of opening the first page on the datatable. So, what is an alegant way to fix this problem without using a service or subcribtion? I can use another class, but not a service. I tried to retrieve the set values from a class, but pageIndex value is undefined when trying to retrieve it.

Any help would be appreciated.

I have a list-ponent where I want to keep the pageIndex value by setting some variables in another class just before navigating to another ponent let's say x-ponent. Then, when navigating back to the list-ponent, I want to get the previously set pageIndex so that open that page instead of opening the first page on the datatable. So, what is an alegant way to fix this problem without using a service or subcribtion? I can use another class, but not a service. I tried to retrieve the set values from a class, but pageIndex value is undefined when trying to retrieve it.

Any help would be appreciated.

• javascript
• angular
• typescript
• routes

3 Answers 3

You can also have the pageIndex as a URL param of the page where list-ponent is rendered.

Inject in your ctor:

private route: ActivatedRoute

Then in your ngOnInit do something like:

this.route.params.subscribe((params: any) => {
    if (params.pageIndex) {
        this.pageIndex = params.pageIndex;
    }
});

In your routing module your URL should match: some-url/:pageIndex. And when paging back and forth in the list the URL should be updated accordingly.

You can use sessionStorage.

In x-ponent, save pageIndex with this.

sessionStorage.setItem('pageIndex', pageIndex);

Then load this value in list-ponent like this.

public pageIndex = Number(sessionStorage.getItem('pageIndex') ?? 0);

import { Location } from '@angular/mon';

previousUrl: string;
constructor(private location: Location,private router: Router){ }

goBackFunction(){
router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {

      console.log('prev:', event.url);
      this.previousUrl = event.url;
});

 this.location.back()  
}

It will take you to the previous page :)