Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Observable 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 demonstrates how to code using observables with the course project. Lukas takes questions from students.

Get Unlimited Access Now

Transcript from the "Observable Demonstration" Lesson

[00:00:00]
>> Lukas Ruebbelke: Jumping into the code what we have here is a couple of things. In the Items Search component, I have an input and I have this local template variable, so it's itemSearch. And then using ViewChild, I'm able to create or actually get a reference in my component.
>> Lukas Ruebbelke: So now what I can do is, I can basically use this reference to attach an initial output to.

[00:00:37] So we'll go const, and I'll just call this search. And so I'm putting a dollar sign on the end to indicate that this is an observable string. And from here, we'll go Observable.fromEvent, and I'm just going to unwrap this. All I'm doing is I'm just grabbing the native element off of it, so that I can attach the clickHandler to it.

[00:01:01] So this.itemSearch, and in this case, we're gonna go with key up, because it's an actual input. So I could button in here, we could capture it and we could actually go with a click. But we're going with a key up event, so it's gonna be key down, whatever.

[00:01:27] Blur, focus, whatever you want to do. And let's go source, or rather subscription, or subscribe. And then let's just go event, and let's just log it out to the console.
>> Lukas Ruebbelke: And what you'll notice here as well.
>> Lukas Ruebbelke: Is that up here, I've went ahead and done this for you.

[00:01:57] But you will import observable and you will import as well the additional operators that you want to use. Because there's so many of them. But you do not want to do is import the entire observable like everything, cuz it's like megs and megs of stuff. So this is why we 're doing this, piece by piece.

[00:02:17] And so, let us see if this compiles, hopefully yes. And as you'll see now, as I start to type, every time I type something, this is going in. Like, it's capturing this event and is performing some operation at the end. In this case it's just passing it straight to the,

[00:02:50]
>> Lukas Ruebbelke: Subscribe lock. Now let's look at this. This is an actual Dom event. And there is some stuff in here. And kind of what I'm interested in is,
>> Lukas Ruebbelke: Let's click through here. I think it's target that value.
>> Lukas Ruebbelke: What are they doing? No, it is the value.

[00:03:17] So we have an event. We're dumping it out. But not super helpful.
>> Lukas Ruebbelke: What I would really like to do is,
>> Lukas Ruebbelke: Make this a little better.
>> Lukas Ruebbelke: And,
>> Lukas Ruebbelke: We'll go here.
>> Lukas Ruebbelke: And sometimes, just cuz I don't like this yelling at me I'm just gonna type this to any.

[00:03:54]
>> Lukas Ruebbelke: And now, what I will do as well is I transform something I will, kind of update my parameters downstream so that I have an idea of what's coming in. So now we're taking this event, we're simply saying I don't want the event object itself. What I wanna do is actually want to reach in and describe one thing.

[00:04:21]
>> Lukas Ruebbelke: And so we'll go here.
>> Lukas Ruebbelke: You can see that as I type, we're capturing it in the subscribe block.
>> Lukas Ruebbelke: Let's also do, just so,
>> Lukas Ruebbelke: We have something that we can see without doing it in the console. I'm going to create a message property. And I'll just go over here.

[00:05:01] We'll go h1, or hR rather, we're just on a roll. And,
>> Lukas Ruebbelke: Let's just put this out here.
>> Lukas Ruebbelke: I need you to hold on for one second.
>> Lukas Ruebbelke: So instead of logging it out, what we're gonna do is we're gonna go, this.message = query.
>> Lukas Ruebbelke: That's all we're doing is we're just pulling this in, and putting it on the screen.

[00:05:48] So we're just capturing it and so we're changing this, it's in the string. Now,
>> Lukas Ruebbelke: This is where, so pretty basic, does everybody have a sense of like, we have this initial output of some stream of data. In this case, it's every time I type that's where the data is coming from, so from event, key up.

[00:06:10] And then we're figuring out where we want to put it. In this case, we're simply saying, at the end of this, whatever comes through here, let's just assign it to message.
>> Lukas Ruebbelke: So what we can also do, for instance, so we did the filter one. So filter works, they've actually modelled this off of pretty much like the higher order, like array functions in JavaScript, and so they're pretty similar.

[00:06:38] So we'll go event, any, and we're just going to filter out,
>> Lukas Ruebbelke: Any event that does not have the shift key held down. So we're just simply saying if event.shiftkey is true, let it through. If not, just ignore it. So we'll go here. I'm typing all day and nothing is happening.

[00:07:16] The minute I hold shift and I keep typing. Now, because my shift key is down you can't really see it, but trust me, it is. Add some seeds here, like it's now going through the stream, hold the shift key down and it catches up. So I'm filtering out anything that is not,

[00:07:42]
>> Lukas Ruebbelke: Like any event that would shift key. So you're gonna attach any kind of parameter here to say, if this thing isn't true filter it out.
>> Lukas Ruebbelke: A step further.
>> Lukas Ruebbelke: So I'm gonna take the filter out.
>> Lukas Ruebbelke: But.
>> Lukas Ruebbelke: We'll go query.
>> Lukas Ruebbelke: So remember, with map you're just simply saying I'm gonna take this thing, and I'm going to do something with it.

[00:08:19] So we'll go and just transform it to uppercase,
>> Lukas Ruebbelke: Super easy, right? So notice it's really handy, think of this is like I have this stream of data, and it's going through, essentially, my map. Kind of custom factory on the side of the highway and we're saying it comes in one way, goes out another way.

[00:08:45]
>> Speaker 2: So it's sending the capital version to the server?
>> Lukas Ruebbelke: Well in this case, all that's happening is it's transforming it here and it's sending it to subscribe. And all we're doing is we're taking this final input and assigning it to this local property right here. But eventually, by the time we're finished with this, we will do something with this.

[00:09:15]
>> Lukas Ruebbelke: So let's see what else we have.
>> Lukas Ruebbelke: Actually I wanna see, what order should I do this in? So we've done map filter, let's do debounce time. So what we're doing is obviously making kind of this search component. And you're gonna kinda want to control how fast you're hitting the server, what frequency are you going to hit the server?

[00:09:41]
>> Lukas Ruebbelke: And so this case let's go with, I don't know, 200. Yeah, so this is 200 milliseconds.
>> Lukas Ruebbelke: And what I'm actually going to do, so the order in which these are in matter as well. So for instance, you would wanna put, for instance, your debounce in front of all of your transformation things.

[00:10:05] So there's no need to run it if you don't need to. And so we'll go here, and actually let's set this at,
>> Lukas Ruebbelke: Okay, two seconds.
>> Lukas Ruebbelke: Hello?
>> Lukas Ruebbelke: I wonder if I did this too long.
>> Lukas Ruebbelke: Let's see what happens if I do this.
>> Lukas Ruebbelke: So there's a little bit, let's do 200.

[00:10:46] I would need to ask you probably the documentation, I thought it was milliseconds, but that seemed like-
>> Speaker 3: Mine's working.
>> Lukas Ruebbelke: Really?
>> Speaker 3: 2000, yeah, a few seconds.
>> Lukas Ruebbelke: Sorry, actually once I stop then it's like, okay. So debounce time, what it does is it takes a bunch of input and, within an allotted time, it just takes the last value from it.

[00:11:09] So once I kind of let off and said, okay, I'm gonna take the last thing that happened within this thing.
>> Lukas Ruebbelke: And let's also do,
>> Lukas Ruebbelke: There's another one, distinctUntilUnchanged. And so what this simply does is, for instance you start typing and you go back and it's the same value, in other words nothing has changed, then it's just going to ignore.

[00:11:41] So this is just another way to kind of filter out that nothing has changed, so therefore there's no need to act upon it. And so I'm trying to, I don't know, let's see what happens here.
>> Lukas Ruebbelke: Yeah, this may be hard to kind of a timing thing here, but basically if you go A, type some stuff, and you went back and write that the last value was A as well.

[00:12:04] You would say, it's the same thing, we're just gonna stop it there. So we're basically just checking has anything changed? If it's distinct, then it will allow it through.
>> Lukas Ruebbelke: All right, so,
>> Lukas Ruebbelke: Let's kinda of get to the punchline here. The last one that I have and then we will call it a day.

[00:12:27] I'm going to leave, yes?
>> Speaker 4: ViewChild.
>> Lukas Ruebbelke: What's that?
>> Speaker 4: What is ViewChild?
>> Lukas Ruebbelke: So all ViewChild is is it looks for a local template variable on your template. So in this case, item search right here. And so it looks in the view and it looks for a child of that name, and it basically creates a reference for you.

[00:12:52]
>> Lukas Ruebbelke: In this imperative context that you can then program against.
>> Speaker 4: Okay, so can I bring in gform, any direct image that was used there that-
>> Lukas Ruebbelke: No, one of the big things with Angular.js is keeping your DOM, your declarative context and your context separate.
>> Speaker 4: Yeah.
>> Lukas Ruebbelke: So because I'm only using this as my starting point, I'm actually not manipulating DOM, per se, directly.

[00:13:19] I'm simply using a DOM element in an event to do additional things. And so they've kind of since loosened up on the separation of declarative versus imperative. But at the same time, really try to keep that separated. And allow the template to be the template and the component class to hold your imperative logic.

[00:13:42] In this case, the only thing that I'm really using here is I'm just using a reference to the input. To capture this event and then process that. The other way that I've seen this, and they're working on a new update that'll actually change this. Is you can actually create a subject, which then you have to put into your template and then call subject.nxt, which I think is like six of one, half a dozen of the other.

[00:14:10] I prefer to have it nice and clean, this is my observable sequence.
>> Speaker 4: So we could not have used simple binding here, right? I mean do the binding here, or a single-
>> Lukas Ruebbelke: No, because it would not create an observable. That's why we're saying when this thing happens, create an observable and continue to do it.

[00:14:32] So using reactive forms, you can actually use value changes and get that. But in this case, we're capturing an event and converting that event into an observable and that's the key.
>> Speaker 4: So do you think from event now that when we have an event binding. If I bond to an event, like an enter event on an input.

[00:14:54]
>> Lukas Ruebbelke: Mm-hm.
>> Speaker 4: Right, would a key appear on an input?
>> Lukas Ruebbelke: So it's basically going to call a method and pass that event object in, but it's not an observable. Therefore, I don't have access to any of this or this. That's the point is that you are essentially capturing an event and using it for your initial output for the string.

[00:15:18] As a result, you now have access to all of the operators. And so I'm gonna show you one more, and this is switchMap. And so how this works is, we'll take the query and we're going to call this ItemService. And so this one is a bit of a jump, so we're gonna take just a bit of a leap here.

[00:15:44]
>> Lukas Ruebbelke: Search query.
>> Lukas Ruebbelke: Why does it not?
>> Speaker 4: [INAUDIBLE] operator.
>> Lukas Ruebbelke: I don't think that it likes query because I think it's confusing with.
>> Speaker 4: No, the equal to sign.
>> Lukas Ruebbelke: Yeah. What's going to work. Teamwork.
>> Lukas Ruebbelke: Ok so now.
>> Lukas Ruebbelke: I'm just gonna update this a little bit.

[00:16:47]
>> Lukas Ruebbelke: So, what we're doing in here, actually, let me make sure this works first, because that would be embarrassing.
>> Lukas Ruebbelke: All right, hooray! So what's happening here?
>> Lukas Ruebbelke: Based on our previous module, of server side communication. When you make an ACTP call, what does it return?
>> Lukas Ruebbelke: An observable, right?

[00:17:20] So when you say, hey server, go do this thing. We get an observable. So using that and keeping that in mind. And I'll obviously just show this to you so we can see exactly what's happening. I'm sending in a term, and I am in a sense making http get.

[00:17:41] And sending in a parameter which allows me to search. So in the item search component,
>> Lukas Ruebbelke: That I'm calling this right here. Item search search query. What is that returning? An observable. Now with that in mind when you call map what does that do? It takes one value and returns a new value.

[00:18:12] So, switchMap, what that does, is it takes one observable string and maps it or switches it to a new observable string. So what we're doing here is we're saying we're gonna throttle this a bit so we don't hammer our server. We're also going to grab the target value, so the actual text that's being inputted.

[00:18:40] And then we're going to call itemService and when that returns an observable, that's what we're going to return into our final input. And so now we're basically doing this live search in about six lines of code. And from here what I can do,
>> Lukas Ruebbelke: Is, let's go.
>> Lukas Ruebbelke: I'm going to create an output.

[00:19:19]
>> Lukas Ruebbelke: And, I don't think it knows it's there, hold on.
>> Lukas Ruebbelke: Wait for it.
>> Lukas Ruebbelke: I'll go results, people's new eventemitter. Do I have this inner eventemitter out? There we go. All right. And then from here. We're going to build results and then items.
>> Lukas Ruebbelke: And from here.

[00:20:09] Does we have an output. Lets go to our home component.
>> Lukas Ruebbelke: results, and let's do.
>> Lukas Ruebbelke: We'll do handle results, and we'll pass in the event
>> Lukas Ruebbelke: This obviously does not exist yet, so let's go into-
>> Lukas Ruebbelke: Home component. And-
>> Lukas Ruebbelke: Handleresults items stat.Items = items.
>> Lukas Ruebbelke: Refresh page.

[00:21:05]
>> Lukas Ruebbelke: This are what we are doing just to summarize.
>> Lukas Ruebbelke: In our item search component, we're capturing the output of this form field. We're throttling it by debouncing it, also making sure that it has indeed changed. So step one is we're just putting up some guards so we don't do 50 billion calls to the server.

[00:21:28] We're grabbing the actual value, the text value from the event. We're using that to call item service. Returning the result into our subscribe block. And then from here, we're saying let's just omit this up. And so the search component is actually not even storing the results. It's simply in the observable stream.

[00:21:51] Saying grabbing the input, doing its transformation. Call in service. Taking the results and saying I have it, I don't need it. And submitting it up. So now we have an output into our home component. It's calling HandleResults. It's taking the results. And so attaching it to the items.

[00:22:13]
>> Lukas Ruebbelke: And they don't know anything about each other. So we have a component that all it is doing is searching against this endpoint and returning its results. I'm not doing anything with it. In this case, I'm using it to overwrite the question. So I'm calling it once to hydrate it.

[00:22:30] But then from here I can use this to type and search and filter this out. So I have completely encapsulated the search component. And the only thing that it's doing is just kicking out its results Into the parent component that I can then consume down here.
>> Lukas Ruebbelke: And this is how I type it.

[00:22:57] Done. So this right here, is the observable sequence. Our initial output-
>> Lukas Ruebbelke: Final input,
>> Lukas Ruebbelke: And all of the operators in between. But in four lines of code we've actually done a whole lot of stuff.