Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Event Communication Demonstration" 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:

Lukas goes through the code to demonstrate how information is passed through states of an application.

Get Unlimited Access Now

Transcript from the "Event Communication Demonstration" Lesson

[00:00:00]
>> Lukas Ruebbelke: And so if we hop into the slides, I'll show you in the slides and I'll actually show you in the code, and so we have a notification service,
>> Lukas Ruebbelke: And we are declaring a subject, so just think of the subject is, it's an observer, or it actually can broadcast and it can also consume.

[00:00:18] So subject = new Subject, and then we're creating an observable stream. And so we're saying notifications, we're using the dollar sign, so this is kind of idiomatic. When you have something that it's not a notification, it's actually an observable wrapped, this notification's wrapped in an observable. A lot of times you'll see that dollar sign to indicate, this is an observable stream.

[00:00:44] And so we're saying, take the subject but give me just, or give me the subject but operate as an observable. So just think of, we have subject and we're exposing it as an observable. Then we have an emit method. A notification comes in and we are saying this.subject.next.

[00:01:08] So if you remember, an observable has three methods, next, error, and complete. So we are able to actually control what happens in the observable portion of the subject, and this is the entirety of this event bus.
>> Lukas Ruebbelke: I feel like there is a question coming, it's almost like a sneeze, you're like [SOUND] why are you doing this?

[00:01:39]
>> Speaker 2: So you can subscribe to this event bus, and anyone can push notifications to the syllabus?
>> Lukas Ruebbelke: Yeah.
>> Speaker 2: Okay, this event bus is global, as long as the notification service classes are in that [INAUDIBLE]?
>> Lukas Ruebbelke: Well it's in the notifications, so it's global in the sense if you can consume the notification service as a dependency.

[00:01:56] So this right here, the subject is stateless. In other words, it takes something in and it broadcasts it. But you have a few variations of this, most notably the behavior subject. And what that does is it's actually maintains state. So as you put something in, it will actually store that last value, and so when somebody subscribes, they get it, okay.

[00:02:21] Here's the kicker. If you go and look at the NGRX source code, how do you think the store is working?
>> Lukas Ruebbelke: So you have this global where the single state tree in your application, and whenever it changes your application is notified. State is flowing down. So what makes NGRX so awesome is under the hood they have a behavior subject that's storing the state for your entire application.

[00:02:50] And whenever it changes, it's simply calling subject.next and sending it down.
>> Lukas Ruebbelke: And so now we inject the notification service, this.ns, and we're grabbing the notifications stream or observable and we're simply saying, hey, .subscribe. If something comes in, g ahead and pass it on to the snack bar.

[00:03:16] So snack bar is just an angular material component. That's what you're seeing at the bottom.
>> Lukas Ruebbelke: And that's how that's working.
>> Speaker 2: This is the consumer?
>> Lukas Ruebbelke: Yes, so this is in the app component. So now let me show you in the code, so I'll prove to you that there's nothing up my sleeves, that this is indeed happening.

[00:03:39]
>> Lukas Ruebbelke: So if we go to the notification service, this is it.
>> Lukas Ruebbelke: Something comes in.
>> Lukas Ruebbelke: We're broadcasting it on the notification stream via subject.
>> Speaker 3: So if you wanted an error notice you'd just [COUGH] have a different method that you call?
>> Lukas Ruebbelke: You just call error. Or let's say we're totally done with this, we never need it complete.

[00:04:15] So an observable has three main methods, next, error, and complete.
>> Lukas Ruebbelke: And so if something goes wrong, you would then just call, this.subject.error, and pass that along.
>> Lukas Ruebbelke: And we're exposing the subject as an observable to the rest of the application to subscribe to. Inject it in, here we're just saying subscribe to the stream.

[00:04:46] Whenever something happens, pass it on to the snack bar to show.
>> Lukas Ruebbelke: So this is very good for showing application wide messaging, like, hey, this notification, this thing, happened. It's also good, I've seen this and I've used this frequently, for when you need a modal that sits in front on top of your application if something is loading.

[00:05:13] So if you've ever done a remote server call and you're like, hey, I need this thing to basically turn on, like a loading indicator or whatever. This would be another example of this. Is what you could do is, in our code if we go to, let's say here.

[00:05:34] Hypothetically you could have something like, (app.) loading, like app.loading. And then what you would simply say is ngIf= "loading". And so under the hood this would be some spinner, whatever the template is, but then what you would do here is loading, again with some more pseudo code. We can do something like, this.ls, for loading service, I'm just making this up off the top of my head.

[00:06:15]
>> Lukas Ruebbelke: loading.subscribe,
>> Lukas Ruebbelke: = this.loading = loading.
>> Lukas Ruebbelke: And obviously it's throwing out this cuz I haven't done this. But then now you would just have a loading service that would look just like this.
>> Lukas Ruebbelke: You would just say loading, or is loading, or toggle, or whatever, and you would say, this.subject.next, true.

[00:06:51] And so in this case I've done is just true or false, just toggling, true or false. And the minute you set it in the service, it broadcast it, picks it up here, and you're bound to it in the template.
>> Lukas Ruebbelke: So with that said,
>> Lukas Ruebbelke: Just keep this in mind, what's happening here.

[00:07:22] And if you are subscribed to the stream,
>> Lukas Ruebbelke: Does it matter where it's coming from? I mean, do you know? All you know it that it's coming in, it doesn't matter. So just put your thinking caps on, cuz this is where we're going, eventually.
>> Lukas Ruebbelke: What would happen if we had a fire based stream in here, that instead of doing it here by calling it manually, we were actually just tapping into a fire based stream and broadcasting it out?

[00:08:03]
>> Lukas Ruebbelke: So I mean the stream is going to come. Just feed it into the notification service. And the rest of the application doesn't care, it just knows that I'm on the notification stream.
>> Lukas Ruebbelke: Something to think about. We'll see it.
>> Speaker 3: Can we see where it is actually sending out a notification?

[00:08:24]
>> Lukas Ruebbelke: What do you mean? Sure. So this is gonna be pretty anticlimactic, but I will oblige. Let's go to newsletter component.
>> Lukas Ruebbelke: So it's just this, I'm just calling it NS cuz I think Form Builder was there, I'm like, I don't feel like typing this all out. .omit and you just for whatever is in there, just a normal function call.

[00:08:56] It just takes that parameter and just drops it into the stream, which then gets consumed by the rest of the app. So one, this is a very efficient way to write this, I mean a few lines of code. So we have a full fledged event bus here, and we've done it in, I don't know.

[00:09:16] If I wanted to get concise about this, it's about 12 lines of code.
>> Lukas Ruebbelke: And it very efficiently communicates something to the rest of the application and pushes it out. Control flow, and this is in fact for the most part, how Redux works. So the beauty of Redux is that somebody could write it in about ten minutes if you can believe it.

[00:09:46] I can sit down and write a version of Redux in ten minutes.
>> Lukas Ruebbelke: The reason being, and so I know for a fact Rob Bermalt, he wrote the first version of NGRX in a weekend, because all it's doing under the hood is basically something like this. Really interesting.

[00:10:06] Uh-huh.
>> Speaker 2: So say you were, I don't know, say it couldn't save your email in the newsletter. Would you have your error notification in a different component that's accessible to the rest of the app, or would you put it in here like as an if else?
>> Lukas Ruebbelke: No, I mean so let's say there was an error.

[00:10:27]
>> Speaker 3: Dev calling emits, it would call error. Where you went ns.emit, here you would say-
>> Lukas Ruebbelke: I mean I wouldn't even, at which point I would just work on the styling.
>> Speaker 3: Yeah.
>> Lukas Ruebbelke: But let's say it went totally wrong, and where's this coming from, here? Could say something went wrong, and we know about it in this method.

[00:11:07]
>> Lukas Ruebbelke: Same thing.
>> Speaker 2: Okay.
>> Lukas Ruebbelke: And there's things, we can flush this out. So you can do custom styling, maybe you wanna be, severity or alert level, info or air or whatever, and then you would visually display it. But I would still just use that same notification bus, use the same component to display it.

[00:11:30] In then, seriously, now in just a couple lines of code we now have this global notification thing that's well encapsulated and really stable.
>> Speaker 2: Yeah, just the same thing over again.
>> Lukas Ruebbelke: Yep.