CODEWITHSUNDEEP
javascriptangulartypescriptrxjsstate-management
coder
coder

Reputation: 99

keep data on reload Angular 8

Im using behaviourSubject RXJS, for interaction between component, I got 3 components, where

but the problem is when user reload the page on payment component data get from Behaviour Subject is empty, based on my finding, I found solution using localStorage, but its not applicable to me, also found about another state management library like ngrx, I am in middle of project, hard to me for implement, is there any better practice to solve this problem ?

this is what I had tried:

payment-store.service.ts

  private transactions = new BehaviorSubject<any>({});
  public transactions$ = this.transactions.asObservable();

    setTransaction(data) {
    this.transactions.next(data);
  }

payment-component.ts

  ngOnInit() {
    this.paymentStore.transactions$.subscribe(
      response => {
        this.totalSummon = response;
      }
    );
  }

and this is my full stackblitz demo. I could use some suggestion and solution to solve this.

Upvotes: 0

Views: 1159

Answers (1)

Chrillewoodz
Chrillewoodz

Reputation: 28348

If storing the data locally isn't a solution then the easiest solution would be to store it in a database. Preferably one that doesn't require you to set up a backend on your own.

Firebase would provide a fast implementation for you as it only requires an initial setup and writing a few security rules so the correct user can access the data.

If you've never used Firebase before I would suggest having a look at @angular/fire which is the implementation for Angular. You can find its documentation here:

https://github.com/angular/angularfire2

With some example documents to get you started.

Upvotes: 1

Related Questions