Implementing the Mediator Design Pattern in Angular 2

In any component-based framework you’ll need to implement component communications. The main principle is that components should be loosely coupled hence reusable hence testable. The mediator design pattern allows you to arrange component communications via “the man in the middle” so a component A never communicates with the component B directly. If a component needs data, someone will provide the data via bindings to the component’s input properties. Who’s this someone?Ain’t no business of the component. If a component needs to provide some data to the external world, it’ll emit events (with the data payload). Emits to whom? Ain’t no business of the component. Let whoever needs the data listen to the events from this component.

The mediator pattern is one of the ways to arrange a loosely coupled communication between components. In the following video I show an example of one of the ways of implementing Mediator in Angular 2. Here the sibling components communicate via their parent, but this could be also arranged via injecting a service into both component that need to “talk” to each other.

This video is an extract from the online training session I ran recently. If you’re interested of learning Angular 2 in a live session, here’s  my speaking/training schedule. If you can’t attend live events, get consider reading our book:  https://manning.com/books/angular-2-development-with-typescript.

9 thoughts on “Implementing the Mediator Design Pattern in Angular 2

  1. Thanks – this helps me understand the concept of loosely-coupled components.
    However, in the video, you do not show the content of mediator.ts
    Are you able to include a snippet of that?

    1. I’m glad you liked it 🙂
      At this point full videos are available only to the attendees of our Angular 2 online training classes.

Leave a comment