- [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.