Communication between components in Angular is really important when building an Angular App, we usually communicate parent-children components adding Input/Output events on. However, when our App starts to grow either with routing or in number of components, we opt to go for services with RxJs to do this implementation.

These services are based on a Behavior Subject property and subscription (AsObservable) in order to get the data asynchronoulsy. But if the reaction/services increase in several components this technique sometimes is quite difficult to maintain on a long-term basis.

That's why AppService has been built for, to avoid multiple injections of different services in any single component, it is acting as a bridge combining multiple behavior Subjects placed in different services.

As I mentioned above, single services are needed to save state of each section, as you can see in the snapshot below Behavior Subject is setting the data in the Behavior Subject for later being called AsObservable at any level of the App.

Centralizing all the Behavior Subjects will provide all states in the App just calling one service, we will provide a single entry creating AppService to expose customerAndBalance$ in a single object, which is very straight forward to handle when retrieving the data in any component.

CombineLatest RxJs operator used to combine each service data in a single object which is going to be rendered in customer-message component. As returns an Observable async pipe has accompanied the data in the template to identify changes in the subscription.

NgIf else, ng-container, ng-template are structural directives applied in customer-message component to render part of the template depending which variable is providing the data to let the user know if any action is required. With this technique we can play with for different scenarios in order to show messages in the DOM.

• git clone https://github.com/JoseMMorales/Angular-And-States.git
• cd Angular-And-States
• code . if using VSCode

angular: "14.2.0"
rxjs: "7.5.0"
typescript: "4.7"
bootstrap: "5.2"
jasmine: "4.3"
Karma: "5.1"

JoseMMorales