1

I have a list-component where I want to keep the pageIndex value by setting some variables in another class just before navigating to another component let's say x-component. Then, when navigating back to the list-component, 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.

Improve this question

3 Answers 3

Reset to default
3

You can also have the pageIndex as a URL param of the page where list-component 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Thanks, but I am not sure where should I apply these code blocks. Do you mean that to pass all the parameters to the x-component and subscribe route parameters in list-component?
@Fredrick no you don't need to pass parameters to x-component because when you navigate back, the above subscription to the URL params will make sure the pageIndex gets the last value instead of resetting to first page.
Thanks, but where should I set pageIndex parameter? When I set that parameter in the list component and then I am not sure if I should pass back some other parameters from details component. I use this._location.back(); to navigate back without passsing any parameter.
On the other hand I am wondering that instead of passing the parameters from list to details and then pass again from details to list, would it be better to save these parameters in the list component (maybe via a class) and then retrieve them onInit method of the list without making any modification on the details component?
By the way, thanks a lot for your valuable helps and voted up ;)
|
1

You can use sessionStorage.

In x-component, save pageIndex with this.

sessionStorage.setItem('pageIndex', pageIndex);

Then load this value in list-component like this.

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

Comments

0 
import { Location } from '@angular/common';

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 :)

Improve this answer

4 Comments

What about getting the parameters that were set previously in the list-component?
@Fredrick I've edit with some new code, check them
I think there is a misunderstooding. There are 2 components and I have some parameters in the list component. Then navigate to details component. And when coming back to the list page again, I need to get the previously set parameters. But you just gave an implementation on the details component to come back without any parameter restore.
Beware that there's an edge case with this scenario such that if user opens a new tab there won't be an entry in the history to go back to. This can throw user out of the Angular application as well as introduce security issues as there's no API for directly inspecting the browser history.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.