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 yakovfain.com
If you can't attend our training, get our Angular 2 book at https://manning.com/books/angular-2-development-with-typescript

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: https://yakovfain.com/2016/10/31/angular-2-component-communication-with-events-vs-callbacks/

In this video I showed one of the ways of mediating using @Input, @Output, and the parent component as a mediator: https://www.youtube.com/watch?v=tSXx4NoKEYY 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: https://www.youtube.com/watch?v=tSXx4NoKEYY

You can also implement master-detail using the Router and Observable. Blogged about it here: https://yakovfain.com/2016/11/20/angular-2-implementing-master-detail-using-router/

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: https://www.youtube.com/watch?v=tSXx4NoKEYY&t=3s

Original Thread

Popular Videos 79546

How It Should Have Ended

Submit Your Video

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