...when a user wants to navigate to other routes having pending data changes in the current page...

The Saga pattern addresses this by breaking a transaction into smaller, local transactions handled by different services.

— Orchestration-Based Saga: A single orchestrator (arranger) manages all the transactions and directs services to execute local transactions.
— Choreography-Based Saga: All the services that are part of the distributed transaction publish a new event after completing their local transaction.

— Booking Service: Starts the process by reserving a room. This is the first local transaction. Once successful, it sends a message to the Payment Service to process the payment.
— Payment Service: Receives the message and processes the payment. If the payment is successful, it commits its local transaction and informs the Booking Service and Notification Service.
— Notification Service: On receiving confirmation of successful payment, it sends a booking confirmation email to the user.
— Handling Failures: If the Payment Service encounters an issue (e.g., payment decline), it returns a failure message to the Booking Service. The Booking Service then executes a compensating transaction to cancel the room reservation, ensuring the system returns to its original consistent state.

— Node.js project with necessary dependencies (express, amqplib, nodemailer, mongoose, dotenv) installed.
— RabbitMQ server running locally or remotely.
— Email server or service for the Notification Service (e.g., Nodemailer with SMTP or an email API service).

...This approach simplifies the reactive component state management in Angular applications, making the code more declarative and easier to maintain...