Angular 8: Create Facade Pattern for Subject-Observable design, Publish/Subscribe

Question

How can I apply Facade Pattern to Subject-Observable (the Publish/Subscribe) Code below?

We have parent component subscribing to many services. Now learned more sibling and other components in different functional areas require Some or All of the service subscriptions. What is a good way to manage and follow dry (don't repeat yourself principal).

Do we have to resubscribe to Same long list of services in the different components? The services may start looking like a vast interconected cobweb, so trying to be careful.

Trying to refer off this website:

https://medium.com/@balramchavan/best-practices-building-angular-services-using-facade-design-pattern-for-complex-systems-d8c516cb95eb

Parent Receiver:

constructor
(
  @Inject('AddressMailingStandardService') private addressMailingStandardService: BasicService,
  @Inject('AddressMailingRuralService') private addressMailingRuralService: BasicService,



  @Inject('TypeService') private typeService: BasicService,
  @Inject('SourceService') private sourceService: BasicService,
  @Inject('PurposeOfUseService') private purposeOfUseService: BasicService,


ngOnInit() {

 this.typeService.currentMessage.subscribe(currentAddressTypeMessage => {
      this.addressTypeMessage = currentAddressTypeMessage;
      this.addressTypeData = this.addressTypeMessage;
    });

    this.sourceService.currentMessage.subscribe(currentAddressSourceMessage => {
      this.sourceMessage = currentAddressSourceMessage;
      this.sourceData = this.addressSourceMessage;
    });

    this.purposeOfUseService.currentMessage.subscribe(currentAddressPurposeMessage => {
      this.purposeOfUseMessage = currentAddressPurposeMessage;
      this.purposeOfUseData = this.addressPurposeOfUseMessage;
    });




    this.addressMailingStandardService.currentMessage.subscribe(currentMessage => {
      this.addressStandardMessage = currentMessage;
      this.addressMailingStandardData = new AddressMailingData(this.addressStandardMessage.value);
    });


    this.addressMailingRuralService.currentMessage.subscribe(currentRuralMessage => {
      this.addressRuralMessage = currentRuralMessage;
      this.addressMailingRuralData = new AddressMailingData(this.addressRuralMessage.value);
    });

Basic Service:

export class BasicService {

  private messageSource = new Subject();
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }
}

Sender Example:

AddressMailingStandardService

this.subs.add(this.standardAddressForm.valueChanges.subscribe(data => {
  this.basicService.changeMessage(this.editAddressForm);
}));

TypeService

statusSelectedItemChanged(e) {
  this.selectedItemOutput = e;
  this.typeService.changeMessage(e);

}

Answer 1

We use the Facade pattern in our application, and I think it's perfectly normal to have to subscribe to similar observables across components. That's what gives you flexibility in the first place.

That said, you can consider creating a Subscription in your Facade service for commonly used combinations of observables.

Then, if a sibling component requires a similar set of observables, it can use that Subscription piecemeal from the Facade instead of having to individually subscribe to each observable within the component.

Please review this StackBlitz:

https://stackblitz.com/edit/angular-4phytx?file=app.facade.ts