‫Instructor: To build our own observable, I'll go
‫into that home component and there in ngOnInit
‫I wanna build a new observable.
‫Now observables are a feature that's not baked
‫into JavaScript or type script.
‫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 type script
‫it understands that parents is an observable
‫and they offer 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 that is a bit
‫like 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 passed this in it gets the value that is emitted
‫as an argument and I just named his argument count
‫because it turns out it will be an incrementing number
‫for interval. We'll later also 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 lock 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 homepage.
‫And there you should now see incrementing values
‫being locked 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 observables 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 HTP module of this course.
‫But there are other observables that keep on emitting values
‫and to stop that and their effort 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 homepage
‫I'm on user one, I wasn't home before.
‫Now I go back to home.
‫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 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 first Obs subscription.
‫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 the import.
‫And now here
‫subscribe actually returns such as subscription.
‫So when we subscribe, we can store that subscription
‫in our first ops subscription property.
‫So we're not storing the observable here
‫that's the observable, but we instantly subscribe here
‫and therefore we store whatever subscriber turns
‫and subscribe returns a subscription.
‫Now the idea behind storing the subscription simply is
‫that we now can also implement on Destroy 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 unsubscribe.
‫And that's an important step.
‫So this is an important step towards
‫understanding observables. One common question I get is
‫okay, 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 parents but also any other observable you'll
‫encounter throughout this course that is provided
‫by a 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.