Join Bonnie Jean Brennan for an in-depth discussion in this video take, part of Learning RxJS.
- [Instructor] Just between you and me, this is probably my favorite chapter. These operators are pretty cool. But first, I have a confession for you. When I first learned rxjs, the only thing I knew was how to create an observable and how to subscribe. I didn't even know about subjects. So for awhile, every time I needed to access a value inside my observable, what did I do? Well I'd subscribe of course. I mean, I had to because I needed to get to that x, or whatever payload was coming out of my API to do something with it. Then one night, on my ngHouston podcast, Jeff Cross was presenting some common mistakes people make when they first start using rxjs.
And he explained that when you use the Acing pipe in Angular, you don't even have to subscribe because it will subscribe for you. And we'll talk about the Acing pipe later. And so I told him, yes I do need to subscribe, because I need to unwrap my values so I can modify it, filter it, sort it, whatever. So then after I do that, do I need to wrap it back in another observable since I have the acing pipe in the dom? And he laughed and said no, Bonnie, there's an easier way. And he taught me, and now I will teach you, all about operators. Operators are used to modify an observable midstream, without unwrapping it.
We're going to explain the acing pipe for angular in the next chapter. First let's focus on these operators. Again, we don't have time to cover all of them, because there are so many, but I want to show you a few of my favorites. We'll start by creating a simple observable using interval. Interval will just increase the value by one for each second or however long you tell it to wait. So we're going to import rxjs, add, observable, interval. So we're going to go ahead and create a simple observable, and we're going to call it numbers.
We're going to give it a value of a 1000, which is milliseconds, so a 1000 milliseconds will be one second. So we should see a value come out every second. Then we're going to subscribe, and just like before, all we're going to do is console log our payload. This is where I normally show you the output in the console log, but I don't even want to run this code because it will never stop, and sometimes code like this will crash the browser. Don't ask me how I know that.
So instead, the first nifty little operator I want to show you is take. First we're going to import it, and it's going to say operator here instead of observable. At the time this course was recorded, this is the way it's written, however, I've heard a rumor that they're changing it to look like this. Which would make sense because it's more consistent with how other imports are handled. But for right now, we're going to go ahead and leave it like this, because this is the way it's indicated in the current official docs.
So once we've imported that, all we have to do is chain this take to the end of our observable, and give it a value. I'm going to give it a value of five. This is going to say, take the first five values off this observable and then stop. Now it's safe to go ahead and check it in the console log. Since it's going to start with zero, we should see zero, one, two, three, four. Once per second. And as you can see, after it did five values, it stopped.
And that's the take operator.
- Creating observables with rx.observable.create
- Subjects, including behavior and replay subjects
- RxJS operators
- Creating an observable from a UI element