Angular 9 how to keep component state after back to previous page?

Question

I am new to Angular. I am using Router for switch the screen.. Like this

this._router.navigate(['a_page'],{state: {data: moredata})

and get the state in a_page constructor like this

this._router.getCurrentNavigation().extras.state;

But if i back from a_page and then forward using browser forward button the extras.state was null. I don't know how to do this in best way, please suggest the idea. Thank you.

you should try exploring `ngRx` or any state management library — programoholic, Aug 15 '20 at 08:28
using state management library is good or have any other standard method? — Sabish.M, Aug 15 '20 at 08:29
You should use ngRx `Subject` to preserve the result instead of playing with router. — Kamran Khatti, Aug 15 '20 at 08:30
well if it's small chunk of data like `id` .. try `localStorge` ... but if it's a large amount of data better go with state management library — programoholic, Aug 15 '20 at 08:31
Isn't it a little anti-pattern to pass states between pages? If you reload the webpage your data is lost anyway... — Pieterjan, Aug 15 '20 at 08:56

score 1 · Answer 1 · answered Aug 15 '20 at 11:04

You can use typescript accessor setter and getter to achieve desired result.

create a service where you set and get the value.

state.service.ts

import { Injectable } from '@angular/core';

@Injectable({
 providedIn: 'root'
})
export class SomeService {
 _state;

 get state() {
  return this._state;
 }

 set state(data) {
  this._state = data
 }
}

get and set can be achieve from any component

export class StateComponent {
 // inject state service to access set get methods
 constructor(private service: StateService) {
  this.service.state =  { data: moredata }; // setting state

  console.log(this.service.state); // getting state from anywhere 
}

Hope this works.

score 0 · Answer 2 · answered Aug 15 '20 at 09:51

You can use singleton services wi th a Subject in order to share data between components (a state management library isn't required).

Create a service using angular-cli : ng generate service service-name

Inject the service into the constructor of the components which need to share the same data :

constructor(private service: MyService) {}

Inside your service, declare a subject which will be responsible to keep the data (a BehaviorSubject is a good idea as it's initialized with a value) :

data: BehaviorSubject<any> = new BehaviorSubject<any>('foo');

To change its value from a component, use the next() method on it :

constructor(private service: MyService) {}

update(): void {
  this.service.data.next('bar');
}

Then in order to get the last value in any component (or service/directive...), subscribe to the BehaviorSubject and do whatever you want with the value :

constructor(private service: MyService) {}

ngOnInit(): void {
  this.service.data.subscribe(value => {
  // do whatever
  });
}

Each time the next() method will be used somewhere in your application, any subscription somewhere else will get this new value.

Angular 9 how to keep component state after back to previous page?

2 Answers2