When it comes to inter-component communication in my Angular project, I am utilizing BehaviourSubject from RXJS. Currently, I have a setup with 3 components:
Inquiry Form
Where users enter an ID number to check for summon-related information. This data is then sent to the Inquiry Response component.
Inquiry Response
This component receives summon details from the Inquiry Form and displays them as checkboxes. Users can select summons (total amount) which are then sent to the Payment Component.
Payment Component
Here, the total summon amount from the Inquiry Response component is displayed.
The issue arises when a user reloads the page on the Payment Component. The data retrieved from the Behaviour Subject appears empty. While I looked into using localStorage and other state management libraries like ngrx, they don't seem feasible for my current project stage. Are there any best practices or alternative solutions to tackle this problem effectively?
I have attempted the following approach:
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;
}
);
}
For a more detailed look at the code, you can check out the StackBlitz demo. Any suggestions or solutions to resolve this challenge would be greatly appreciated.