- [Instructor] Now it's time to create an Observable.
We're going to use those choose your own adventure controls
to figure out which method we'd want to use.
Then we'll pull it into our own project
and check it out.
Okay, let's read our choices.
I have one existing Obsvervable.
No.
I have some Observables to combine...
No, we have none yet.
I have no Obsvervables yet.
Bingo, that's the one.
So we'll click this one.
Let's see, I want to create a new Obsvervable
or I want to convert a callback to an Obsvervable...
Well we want to create a new Obsvervable
so let's click there.
Ack, more choices.
Don't worry, you can always click undo to go back
or reset to start over.
We're going to learn more of these later
but for now we're going to go pick the simplest operator
which is using custom logic.
Okay we have an operator.
Create, let's click on create
to learn more about this operator.
At the top we'll see a marble diagram
then an explanation of this operator
then code samples.
This section explains the methods available
on the observer, which are next, error and complete.
Next can be used over and over again,
however if you use either error or complete
it will close your Obsvervable
and then you won't be able to use it again.
Okay, let's go ahead and copy this code
so we can pull it into our editor and check it out.
In the project we just created
let's navigate to source, app,
and open app.component.ts.
This is basically the root of our application
so it'll be a good place to test out some sample code.
First we're going to import
an Obsvervable from rxjs/Obsvervable.
And it should look just like that.
I want to point out that you can import all of rxjs here
rather than importing each method or operator
as you need them.
However, just because you can doesn't mean you should.
Remember I said Ben Lesh is an overachiever?
Rxjs is huge!
Trust me you do not want to
import the whole thing into your project
or your project will also be huge
and take forever to load.
So we really want to only get what we need from rxjs.
So here we're going to do rxjs/Obsvervable.
Next we need a constructor.
So we're going to create a constructor
so that we can put our code in here.
You won't do it like this in your project.
In real life, you would probably have
various components and services all in different files.
So your not actually going to put
your logic inside the constructor.
But for this section, I'm just putting it here
because we're starting out super simple.
Okay so we're going to paste our code
straight from the rxjs website.
Now we're going to make a couple of small changes.
Just to bring it up to ES6.
We don't need the Rx.
because we've already imported this above.
So we'll take that off.
We're going to change the var to a const
just to bring it up to date
because this course is using ES6
and that rxjs website is a little bit older.
We're also going to change that
to the fat arrow syntax.
And that should be it.
One more thing,
when I first learned this
it was considered a personal preference
but it's been around awhile.
So now that I'm teaching it to you
I'm going to call it a best practice.
When we name an Obsvervable
we're going to put a dollar sign
at the end of that variable name.
This signifies to other developers and to myself
that this variable represents an Obsvervable.
When I first learned about this
I didn't really like it.
But now that I've gotten used to it.
I really do prefer it and so do most of
the other rxjs developers that I've worked with.
So it's not required and it won't affect the actual code
but I will use it in this course
and I do recommend it.
Now let's check our output
to make sure this works as expected.
What we should see is one, two, three
and then this is the end
which will be called on complete.
So first we need to jump back over to the terminal
and we need ng serve
to make sure our app is running.
Then we're going to go back to the browser...
Okay, we see our output in the console log.
One, two, three, this is the end.
That's perfect.
Before we move on,
let's just talk through this code for a minute.
What happened there?
Sometimes when I learn new things,
I come across new words
and it helps me to make sure I understand them.
So what's an Obsvervable and what is an observer?
What's the difference?
An Obsvervable is just a function.
It takes in an observer and provides us with lots of methods
that do different things, like create and subscribe.
So what is observer mean?
The observer is just an object.
It has three methods, next, error and complete.
The observer is what you will use
to listen to whatever it is you want to listen to.
It could be a button, a search box,
a remote data stream, anything.
Did that make sense?
So the Obsvervable is the outer container here.
That's what we're subscribing to here.
The observer is the inner trigger that will fire off
each time something changes.
The Obsvervable carries it to all the subscribers.
Congratulations, you've just created your first Obsvervable.
This will work fine the way it is now.
However, there's one more thing I want to teach you,
before we move on.
Ever hear of a memory leak?
When you subscribe to an Obsvervable
it will keep listening for changes.
That's what we love about Obsvervables.
However, it will literally keep listening
even if your user navigates to a different page
and forgets about this page
it will still be listening.
We're not going to get into a lot of detail about this
but basically you really don't want to
leave that subscribe open.
Luckily, angular has a super eazy life cycle hook.
So we're going to change this to an ngOnInit()
which means we need to go ahead and define this Obsvervable
up here so that we can use it from one function to another.
We'll change this to a this.obsvervable
and we'll change this to a this.observable.
So say we have our subscribe here.
What we need to do is we're going to go into
another nifty little built in angular lifecycle hook
called ngOnDestroy(),
which basically means fire this code
when they leave the component
that they're currently looking at.
And in here, all we need to do is
this.observable$.unsubscribe();
And all that's going to do is clean it up
so that our code is nice and efficient
and we won't have any memory leaks.
At least not here.