Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Introducing Event Communication" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

After stating he wants to show the standard issues when dealing with large-scale applications, Lukas discusses communicating changes or information across an application.

Get Unlimited Access Now

Transcript from the "Introducing Event Communication" Lesson

[00:00:00]
>> Lukas Ruebbelke: What we're gonna do for the next little bit is I'm going to show you kinda some specific things that I want to communicate based on some of the conversations that we've had. And we're kind of at this point, I feel like, the cake has been made and we're just putting icing on it.

[00:00:19] So, these are kinda some of the fun things that I worked into the application last night. Incredibly useful, and we're probably not going to do challenges with them, but I'm just gonna show you, it's in the application, go check it out. And so these are kinda some of the common things that I run into frequently when I'm working with large-scale applications.

[00:00:39] So remember, managing state, flow control, and core volume. So these are these are kind of the three things that we're thinking about today. So one of the challenges that you run into, is how do you communicate changes or information across an application? So to this end, I'm talking about event communication.

[00:01:11]
>> Lukas Ruebbelke: In that, we want to communicate state over time, as it happens. So, where am I leading with this? Well, duh duh duuuh!
>> Lukas Ruebbelke: RxJS. So prior to, I would say angular to and above and I look like Jacover ran this. It was very common to use events especially in 1.X to communicate from one thing to another.

[00:01:38] So if you've ever done like scope.broadcast or scope.on and capture some events. Well, what you’re trying to do is communicate state over time. We can do this obviously with observables. It’s very well suited because they can iterate a pattern, they observer pattern. It gives us the ability to do that.

[00:02:01] And so, we’ve kind of seen in the context of consuming something. But we can also reverse that, and I'll show you how to not only consume state over time, but also to insert yourself at the other end of the spectrum, and start pushing things in. So, we know how to consume like, data.

[00:02:21] So, we have our initial output of data, whatever that is, we know how to consume it. But what I want to show you is how do we get onto this side and control the initial output and actually communicate something of our choosing. And this is going to lead right into when we get into the Firebase thing.

[00:02:42] It'll be just a hop, skip, and a jump. And we're gonna hook in Firebase right into this, so
>> Lukas Ruebbelke: What I want to do is, let me just show you real quick. So I'm gonna hop out of here, and let's look in here. So pay attention to the bottom of the screen.

[00:03:01] Hopefully this works. I'm going to subscribe to
>> Lukas Ruebbelke: My newsletter.
>> Lukas Ruebbelke: So, I hit subscribe. Lots of you get a little pop-up down here. And so what we 're doing is we're saying, we wanna notify the user that something has happened. It's somewhere in the application. We wanna do it kinda global way.

[00:03:29] And so it's very common to have kinda this global, kinda like, message bar or some communication saying like something happened to the app and we're surfacing it in a way for you to see it. And so I think that you know Bootstrap has kind of their notification bar thing or like these warning bars or whatever.

[00:03:44] You'll even see it's like toaster. Things that hop up in the corner.
>> Lukas Ruebbelke: I've taken just also a step further, if we go here, I think it's in here. Yeah, so item saved, save it again, I can create a new item. This is where you would wanna give your user a little que that something happened in the application.

[00:04:07] Now notice when it's popping up it has to do specifically to that action. So I'm not doing a new item and it's saying like so and so just subscribed. Cuz we're basically passing notifications into the application and we're handling it. So Save and you see, item created. Okay, so this is at any point in the application, how do we communicate that an event has happened?

[00:04:36] So the answer is, in a nut shell we are using subjects, so our shares has this thing called the subject. I'll talk about that in a minute. Which allows you to not only consume information via an observable. So it has an observable in it. But you can also broadcast.

[00:04:56] Or essentially pass data along the observable stream via a subject. And then we use this as an event bus to communicate state across the application, incredibly efficient.