65. Understand the core of the Observables in rxjs. Need of subscribe & unsubscribe in the angular.

hi friends this is leela welcome to my angular course we have learnt the complete routing concept in the angular okay so these are all the routing concepts in the angular now what we will try to do is now we will go to another concept that is nothing but observables what is this observables okay observables is nothing but what we can say is the name itself is observing okay observables so you will be having two types of things observable and observer okay observable and an observer observable is nothing but which will be sending the data okay the observable means which will be sending the data observer is nothing but what we can say is who will be observing that sending data okay so this is stream of data so angular heavily uses this observable concepts so observable concepts doesn't ships inbuilt with the angular so this one will be having another third party library that is you can see in this package.json you will be able to see here rxjs the current version is something around 6.5.5 so this angle uses heavily this rxjs observables [Music] so this type of observables will be of different types for example it will execute only once and it will stop and it will way another one is it will wait until the data comes it will go on observing the data until the data comes and once the data comes and it will stop observing that one so that's nothing but example so what we can say is http http request is nothing but it's an observable only so we're going to the http concepts you'll see about this it should be in the angular and another one is nothing but what we can say is continuous observing the data if you get the data also it will take the data and it will do some logic and again it will start observing the data again so if any data comes or not so that is continuous observable things okay so here if you see here the route dot data dot subscribe subscribe means nothing but what we can see is observer okay observer point of view so the route dot data is nothing but the observable thing so it is sending the data so when it is sending the data dot subscribe so we need to observe the data using the subscribe thing and it will get and we will give in the subscribe we will be getting the data and we will be printing the data so whenever the route sends the data here the router data sends the data so immediately it will be captured with the subscript okay so this one is the anglers inbuilt observable so let's see inside rxjs so rxjs observables how it will be so this is also an rxjs observable only but it is shipped with the angular so angular uses this rxjs observable and where they have given this route.subscribe so now we will see our rxjs observable so for example in rxjs we have an inbuilt observable that is nothing but what we can say interval okay interval so this one is an interval from rxjs so an interval is an observable so same like the this dot root.data which is an observable so here you will be able to see the property data is an observable and it will be sending of data okay so like this interval is also an observable okay so see the written type is an observable so if any you need to remember blindly remember one thing if you see in the angular anywhere observable so if the written type of the data is an observable means it will have dot subscribe so it will be using dot subscribe we need to observe the data using dot subscribe remember this one so interval what is the thing it is taking it's an interval and it is taking the period period is nothing but seconds number of milliseconds so okay so what is this interval of thousand means for every one second it will be sending a data okay for every one second it will be sending a data so how can i catch the data so you can see that it is a written type is observable so we can catch the data using subscribe okay subscribe i am getting the count counter data anything whatever the variable you what you can do so now here if i do console.log of count okay so now i have created a interval okay interval for every second this one will execute so now if i go here and if i execute so here you'll be able to see the output 0 1 2 3 4 so this one is coming from the interval so every time interval is sending an incremented value so that that incremented value that is catching in this count and it is printing this one okay so now this interval is has some problems what is the problem is for example here if i refresh it again you can see you can see how it is doing so it is printing right now i am going to other component categories component you see that again still the observable is still running the interval concept is still running but we are not in the home component so we are not in the home company the home component is destroyed we went to the categories component then also this interval is firing so that means you need to remember that observable doesn't depend on the component if the component dies or if the component has gone away then also the interval will exist like that only the observables will exist like that only okay you need to remember now if i go here to the home component again again another interval will be created c 37012 again new inter interval instance has been created and observed so if i go again to categories now two two intervals are running now if i go again to home now it will run three introverts see 13 15 one so so like this if you go on like this so you'll be able to see so many intervals you will be having so that means intervals is going on but adding one by one where when we are coming to the component so this could be a memory leakage problem so the the performance of the project will affect like this thing so observables is a one of the useful and also the dangerous things if you misuse these things okay so there will be a memory problem and project performance will be very bad so how we can restrict this one so how we can restrict this one is so we need to create we need to unsubscribe the interval when we are going out of this components we need to unsubscribe this one so how we can unsubscribe so just create a variable that interval subscription okay it is of type subscription so this can can be imported from the rxjs okay now what i will be doing is while creating this one will give you the subscription okay i will be assigning that one in the interval subscription so now when we are leaving this component so when we will be leaving this component so when we click on another when we are going to another root right so what is the method it will be executed ng on destroy so in that ngo disk drive so let's implement the on destroy so now here i will be writing ng on destroy so on ng on destroy what i can do this dot interval on subscription dot unsubscribe i can unsubscribe the control subscription now let's go here let it refresh the code has been refreshed now it is in the home component you can see that that is now it is in the home component now it is the interval is executing now i went to the categories immediately see observe the interval has been stopped now when i go to home component again it will start new interval starts from the zero okay when i go to another component it goes and stop okay so this is how we need to implement this in subscription observables thing so whenever you are subscribing means you need to remember that on ngr district you need to unsubscribe that observable so this is of important thing then now you may get a doubt that so here also the route.subscribe you are subscribing that one so but we are not unsubscribing this one so this could this may this could lead to a performance issue issued you can think now one thing you need to remember yeah you can write that's not a problem so you can write that route subscription you can take this off type subscription you can take okay so this can also you can take up type subscription and you can copy this one and here you can write this one and you can copy and here what i can do is i can do unsubscribe this is not a problem so this is like this also you can do but the benefit of this one is as i already told you this is an angular observable okay the angular observable the angular is smart in such a way that when we are going out of the component it will destroy all the observables automatically so this is an rxjs observable so that is the reason we need to manually unsubscribe that one so whatever the the observables present ship would have been built with the angular so this dot params dot periperons dot fragments these are all the things ships with the angular defaultly so those things will be automatically destroyed uh automatically unsubscribed in the ng are destroyed okay so there is no need to implement these things okay but if you are using this interval and rx just third party means you need to mustang should you need to unsubscribe it is a best practice all the time to to unsubscribe in the engineer district if you if you write like this also it's not a problem so just in order to know this one okay so this is the main theme concept of the observables in the angular so now in the next video what we'll do is we'll try to create our own observable how can we create our own observable we will see okay so if you like this video and if you have any doubts or any suggestions please post the comments below to this video and if you like this video don't forget to subscribe to my channel thank you

Channel: Leela Web Dev

Views: 2,844

Rating: 4.9499998 out of 5

Keywords: angular, angular observables, observable subscribe, observable unsubscribe, angular tutorial, angular 2, angular 5

Id: 3LibP3-Ze0U

Length: 10min 3sec (603 seconds)

Published: Mon Sep 14 2020