Observables Solution

[00:00:00]
>> Challenge here is that we want to basically wire up to the search control and do some stuff. [LAUGH] All right, let's do it. Now, the first thing we're gonna do, we're gonna do engine in it. That's not important. And now, what we need to do is we need to ask ourselves, where is the initial output?

[00:00:35]
And so in this case, it's search control. And I do apologize. This is a little bit of an angular thing. But one of the reasons why I like angular is because not because it's angular, I think it's cool enough. But they've embraced a lot of things that I really like.

[00:00:56]
And so in this case, its value changes and what this returns is let me see if you can see, right here. So on reactive forms, that when the value changes it is emitting an observable stream. So, angular in this case has a lot of this reactive functionality baked into the framework.

[00:01:29]
So now we have our observable stream. So this is our initial output. And from here, Let's do our final input. We'll take this query and we're just gonna say this query string equals query. Final input, so hopefully this makes sense up to this point. I'm gonna save this and let's see what happens.

[00:02:05]
So I'll go down here form input. And if I'm half the programmer that I think I am, I'll be able to type something in and lo and behold, it's going to show up on the page. So i feel pretty good. It's a really good Thursday. From here, now let's stack this in.

[00:02:30]
So we're gonna pipe and let's do something. We'll go map, we'll take the query and you know what? Let's just yolo, I'm gonna go straight to the reverse. And so we're going to return query. Why did I do this? Split, which turns an array, reverse, join. [LAUGH] By the way, I would just like to point out I'm still just, it's nouns and verbs.

[00:03:07]
All right, so I think what's happening is I'm splitting on the strings, which turns an array. I'm reversing the array and I'm joining it back together. Let's see. We'll go here. Maybe I'll do that one more time, just to ensure that everybody is sufficiently impressed with that. What we can also do is, From here, I can map again, I can really do this kind of in any order.

[00:03:51]
Let's go query to upper case. Let's save this. And we'll go back here. And I realized this is kind of a little nonsensical but what I wanna point out here is that we are piping data. In this case our input through a stream and on the other end, it's coming out in just the way that we want.

[00:04:31]
Which is fantastic. What we can also do while I'll leave that it for that right now. Let me do one more. I'll take this one off, I'll take both of these off. Query, I totally forgot how to do this. Is there a single method? So if somebody knows how to URL encode, then feel free to hop in and save my life here so I don't have to look this up.

[00:05:21]
Fine. I'll look it up. I'm gonna see this one time and I'm just gonna be like, duh, that doesn't help. Let's do this. JavaScript. All yeah. Encode URI. That's probably what I wanted. All right. Let's go back into our code. And let's see. I'm hopeful. [LAUGH] Yeah. And, This other stuff is spaces, I don't know what else gets encoded, but here we go.

[00:06:10]
Tada. So now just imagine, like this is actually useful to where you put in something you need to actually convert it into a URL encoded string in real time. Well, you're welcome. You can totally do that for money and I approve.