Angular 2: Implementing the Mediator Design Pattern

By: Yakov Fain

27   1   5195

Uploaded on 03/19/2016

This video is a clip from my recent online training session on Angular 2. Here I explain how to create loosely-coupled components implementing the Mediator design pattern.
To see when my next public Angular training is scheduled, visit
If you can't attend our training, get our Angular 2 book at

Comments (6):

By anonymous    2017-09-20

If you annotate a variable with @Output it has to be of the type EventEmitter. The name of the variable becomes the name of the custom event. Messaging is the only reason for using @Output. You're sending an event without caring who's interested in getting it. Angular doesn't support event bubbling, but you can implement it with native DOM events.

IMO, using events offers a more loosely coupled architecture in inter-component communication than passing callbacks. In this blog I showed how to use callbacks with @Input params:

In this video I showed one of the ways of mediating using @Input, @Output, and the parent component as a mediator: Using an injectable service as a mediator offers more flexibility though.

Original Thread

By anonymous    2017-09-20

Since both of your components have a common parent, the simplest way would be to use @Input() and @Output() properties and have the parent play a role of a mediator. I recorded a short video on this:

You can also implement master-detail using the Router and Observable. Blogged about it here:

Original Thread

By anonymous    2017-09-20

If both components have a common parent, the first component should emit an event that would set a boolean var in the parent to toggle the visibility of the second component. In the template of the parent use the *ngIf directive bound to this boolean variable to show/hide the component two. I've recorded a short video to show how to implement inter-component communication using the parent component as a mediator here:

Original Thread

Popular Videos 276

Submit Your Video

If you have some great dev videos to share, please fill out this form.