To build our own observable, I'll go into that home component and there in ngOnInit,
I want to build a new observable. Now
observables are a feature that's not baked into Javascript or TypeScript,
instead they're added by a package named RxJS and that's why in Angular projects, if you have a look
at package.json which lists all your dependencies, you find RxJS here. Now in the home component,
I want to build my own observable here in ngOnInit and for that, we can import something from that
RxJS package.
So let's import from RxJS and we don't need to do that when using observables because thanks to
TypeScript, it understands that params is an observable and therefore, it knows we can subscribe there
and we never need to explicitly inform it about the type
but if we want to create a new observable, we need certain features from that RxJS package, to
be precise that RxJS package gives us different ways of creating a new observable
and one of the easiest ways is the interval method, the interval function.
You can just import interval like this and then here, you can call interval and pass in a number and
that is a bit like the set interval where you pass a number in milliseconds
that will fire an event every x milliseconds. So if I pass 1000 here, then every second, a new event will
be emitted.
Now this gives us an observable and therefore, we can subscribe to the observable here and there,
I can now get my count,
you can name this whatever you want and handle this or use this inside of this function,
so I'm passing an anonymous function here to subscribe,
that's the first argument we can pass to subscribe,
it's the handler for all the data values that are emitted.
So I pass this in, it gets the value that is emitted as an argument and I just name this argument count
because it turns out it will be an incrementing number, for interval, we'll later also later build an observable
entirely from scratch where we fully control the emitted values,
here we'll take this half measure which is a built-in function that gives us an observable but still,
it's more from the ground up than the ones Angular ships with.
So here, we have interval which will fire a new value every second and in this function here,
I will simply console log count.
So the idea now is that we get a new value emitted every second and we log that to the console.
Now let's save all files and open the developer tools here in our browser and there, let's go to the Javascript
console and navigate to the home page and there, you should now see incrementing value is being logged
to the console, one value every second
and that of course comes from that interval function that gives us an observable
and again, this is not an observable we built entirely from the ground up but it's pretty close.
Now when I navigate away now to user one, you see that this keeps on counting and that is something you
have to be aware of,
observables don't necessarily stop emitting values just because you're not interested in them anymore.
There are certain observable that emit a value once and they're done, like for example an HTTP
request where you get back a response, something you'll see later in the HTTP module of this course
but there are other observables that
keep on emitting values and to stop that and therefore to prevent memory leaks, which you would otherwise
introduce
if that keeps on emitting whilst you're not interested in it anymore, you should unsubscribe from any
observable in which values you are no longer interested
and that's really important because before we do that, watch what happens if I go back to the home page.
I'm on user 1, I was on home before,
now I go back to home and
what you now see is a new observable started. So we have the old one going on and a new one
and of course we can repeat that. We get more and more of observables counting and that of course is very
bad.
If that happens behind the scenes, you quickly run out of resources and you slow down your app, you introduce
a memory leak here because your memory gets occupied a lot by data you don't need.
So you definitely need to clear that and to do that, we should store our subscriptions and here, I'll
then name this firstObsSubscription, you can name it whatever you want and the type of this private
property of the home component will be subscription and subscription also needs to be imported from
RxJS, so make sure to add this import
and now here, subscribe actually returns such a subscription.
So when we subscribe, we can store that subscription in our firstObsSubscription property.
So we're not storing the observable here,
that's the observable but we instantly subscribe here and therefore, we store whatever subscribe returns
and subscribe returns a subscription.
Now the idea behind storing the subscription simply is that we now can also implement onDestroy here,
which you need to import from @angular/core
and that forces us to add the ngOnDestroy lifecycle hook and inside of ngOnDestroy,
we can now use our subscription and call unsubscribe and that means that whenever we leave that component,
we clear that subscription and therefore we prevent memory leaks because we're not keeping old subscriptions
around.
Now if you save that and reload the app, you see our observable starts again
but if I navigate away, we get no new values.
If I go back, it starts at zero again
but the old observable is dead because we unsubscribed and that's an important step.
So this is an important step towards understanding observables.
One common question I get is OK,
we unsubscribe here,
why don't we unsubscribe in the user component, here where we also set up a subscription? And that is a
valid question.
The answer simply is Angular does that for you. For the observables provided by Angular, like params
but also any other observable you'll encounter throughout this course that is provided by an Angular
package or by a feature provided by Angular, all these Angular observables are managed by Angular
and therefore, you don't need to unsubscribe manually here,
Angular will take care about this.