Observables Demonstration

[00:00:00]
>> If we go to the macro application, there are a ton of examples. We will probably go through just a couple of them. So we'll do a little demo. We'll do a little challenge. And we're not gonna go through all of these. That would take a very long time.

[00:00:27]
Mainly what I care about here, is that when we talk about the fifth element, that we understand that we can effectively manage and manipulate time and communication and leverage it to create stability in our apps so that we can deploy them at scale, safely, and reliably. So, I'll show you a couple of them, maybe two, three, maybe four.

[00:00:59]
So right here, we have this basic sequence. And all I'm doing, is when I click this, it's just going, beast mode activated. Super simple, all right? Let's hop in the code and let us look at this. So in the macro app, if you go in here into the app, you have the concepts, and within this we have basic sequence.

[00:01:29]
And what we have here is, and I'm going to just chop this out for right now. And if you actually go to the stack blitz that we posted in the beginning, there is a version of this, the stuff is commented out. But in this case, I'm just going to chop it out.

[00:01:49]
We have a very, very simple template that has a button. And I have a simple h1 tag. And so I'm just saying, I want to get access to this button with your child. And I just have this message that I want to display. And then I have a convenience method that allows me to essentially get access to the native element because I'm dealing with an angular material button.

[00:02:23]
All right, now with that said, let's build this out. So the first thing we need to do, is we need to capture, or we need to establish that initial output. So we're gonna go from event, and then we're going to put in the element that we want to target, and the event that we want to capture.

[00:02:52]
So this.getNativeElement. And I'm gonna pass in this.button. So this is just kind of unwrapping this. And let's go with click, all right? And so now I have my initial output. But it's not going to do anything until I subscribe. So imagine a tray that has no destination. It's just gonna go and go and go that you have to essentially terminate or say I'm ready to finalize the stream by adding in the subscribe lock, it won't even evaluate.

[00:03:34]
So they're lazy by nature that they do not evaluate, until you add a subscribe lock. So from here, I'm just going to set this.message to the result. And now actually let's do this first. I'm taking the result and it knows that it's definitely not a string. So I'm just gonna set this here.

[00:04:14]
And I'm just gonna hard code this in. Save this. We'll go back. And I'm gonna just say MARK MODE ACTIVATED. Back to the code, Slick. So we're just triggering that, it's just hitting that subscribe block. Thing is I'm doing it, but I'm not really updating anything because I'm just keep sending it to the same value.

[00:04:36]
Now, what I can do is this. What is coming through the stream and I'll just go ahead and trace this out real quick just so you can see what we can expect or what's actually happening. So if I go here, and I'm just going to console log the result.

[00:05:06]
I'm gonna save this. Let's go back to the browser. And, I clicked it, the result itself. And I feel like this is where I have to make it big. It's the mouse event. It's capturing the mouse event, big surprise. It's a click. And it's just passing that through.

[00:05:27]
It's just saying, this was the origin of it, here you go. So it's important to say that whatever you pass into one side, is gonna come out the other side, until you change it. Which is what we're gonna do. So now what we can do, is we can create a pipe for our observable stream to go through.

[00:05:52]
So, obviously I don't particularly care about this mouse event. I'm gonna throw it away. And so we'll take the event, and instead I am, TANNER IS AN ELITE PLANNER. And then let's save this and let's go into the code. And, I forgot to do something. So clearly, I am not an elite planner.

[00:06:32]
Let me save this. Let's go back. And, It worked. If we look in here, now what is coming in the stream? Well, this one I said, so I took that event and I said, I don't want this, throw it away, instead return this. All we're doing is we're doing the little switcheroo, a little fast and furious.

[00:06:56]
One car pulls under the bridge, and the exact same car but without Dominic drives off and the con is on. So, what we can do as well, I just want to show how we can stack operators. From here I can add in another one which is filter, which is going to take the event which is a keyboard event.

[00:07:23]
And we're going to say, only allow this through if the shift key is true. In other words, if I'm holding the shift, allow it in. If not, then don't do anything. All right, so I'm filtering and if it does pass, then we will see just how elite Tanner truly is.

[00:08:00]
And so I can simplify this just a bit. There we go. And let's save this into our browser. And you're gonna have to trust me here. I am truly clicking on this button. And I also, you're gonna have to trust me that if I'm clicking on it and my other hand's over here, clearly it's not on the shift key.

[00:08:31]
Unless somehow I put my foot up without being seen and do that. But I hold the shift key down, and now you can see it passes through. So, very, very simple. But now think about what if you had a stream of data in your application, and you said, when this data comes in, I need it to be in this shape.

[00:08:59]
But I need to know not only does it need to be in the shape, but I need to know every single time it's available. Well, here we are like this is it. This is how we do it. And so that is the basic observable sequence.