CODEWITHSUNDEEP
angular
phacic
phacic

Reputation: 1552

angular 2 component reuse

Am kinda new to angular 2 but am looking for a way to navigate back to a component and find it as i left it.

Say navigate from a list of users to a user detail and afterwards navigate back to the list of users

  1. without the component requesting users from the server. that is sending a get requests again. but will be filled with the users just like before i navigated from it
  2. if i had scrolled it will be at the exact point before i left

Thanks in advance guys

Upvotes: 1

Views: 378

Answers (1)

KwintenP
KwintenP

Reputation: 4775

If you need to recreate a component after it has been destroyed, to look exactly how it was before it was destroyed, you need to store the state that is needed for this. In your case this will be the list of users, and the position he is in at that moment.

To store state in an angular application the best option is to use the ngrx/store implementation of the Redux architecture. What you need to do is store everyting in the ngrx/store that you need to recreate the component.

In your component's ngOnInit lifecycle hook, you could fetch that data from the store and make your component look the way it did before. This could look a little like this.

ngOnInit(): void {
    this.list$ = this.store.select((state: ApplicationState) => state.list);
    this.position$ = this.store.select((state: ApplicationState) => state.position);
}

Ngrx/store returns observables from the store which you can use in your template like this:

 <div *ngFor="let element of list$ | async">

For more information on redux reduxjs.org and github.com/ngrx/store

Upvotes: 1

Related Questions