What is Observable | Observables | Angular 12+

hello and welcome back in this lecture let's learn what is an observable and where and when do we use it now in a very simple terms we use observables to perform asynchronous operation and handle asynchronous data another way of performing asynchronous operation in javascript and handling asynchronous data is by using promises so we can handle asynchronous operation in angular using either promises or observables now what is asynchronous operation and asynchronous data well we already know that javascript is a single threaded programming language that means the code is executed line by line and once the execution of one code is complete then only the next code in the program will be executed right so if a task takes long time in its execution for example let's say we are making an http request to the server in that case it is going to take some time right so the next statement after that http request will have to wait for its execution it will only get executed when the http request completes so we can say that the synchronous code is blocking in nature and this is where asynchronous programming comes into picture an asynchronous code executes in the background without blocking the execution of the code in the main thread okay so an asynchronous code is non-blocking that means we can make http request asynchronously in that case it will run in the background and the next code after that http request will be executed immediately in the main thread so in this case the http request will not block the execution of next line of code ok so using asynchronous program we can perform long network requests without blocking the main thread now again there are two ways through which we can do that either using promises or observables so let's first quickly understand the difference between a promise and an observable so let's say we are creating an application which needs some data from the server so let's say we are requesting a list of users from the server in that case from our application we will send a request to the server now the server will get this data either from the database or from the web api now let's say the data which we are requesting is huge in that case the server will take some time to gather that data okay so let's say we have one million user in our database so in order to get that one million user the server will take some time to gather all the data and once the data is available it will create a response and it will send that data with the response to the client so here the server gathered all the data and once the data is ready it sent all that data at once to the client and this is how a promise works a promise promises us some data and it provides us the data over a period of time and a promise provides us the data once the complete data is ready now remember that here the data can be the actual data which we have requested for or it can also be an error okay so let's say if there is some network issues if there is no internet connection in that case also the promise will return us a data but that data will be the error message okay it will be an error object all right so this is how a promise works okay this is how a promise deals with the asynchronous data now let's see how an observable deals with the asynchronous data so again let's say we are making an http request to the server to get all the users from our database so again the server will collect the data from the database or from the web api now remember that the observable will not wait for the complete data to be available an observable streams the data okay so it will send the data in packets okay when some of the data will be available it will send that data and then it will again get the rest of the data and it will send it with the response so here you can see the observable is streaming the data it is sending the data in packets in chunks it is not waiting for all the data to be available and then send the data at once it is streaming the data and that is what the difference between a promise and an observable is a promise returns us all the data at once it provides us a single data but an observable streams the data okay it provides us multiple values another difference between a promise and an observable is that a promise promises you some data it will certainly give you that data even if there is no code using that data but in case of an observable the observable will only provide the data if there is someone to use that data if there is no one which is using that data in that case the observable will not send that data remember this point and the next difference is a promise is native to javascript it is provided by javascript language but observable is not a native feature of angular or javascript it is provided by another javascript library which is called as rxjs all right so we can say that an observable is a function that converts ordinary stream of data into an observable stream of data you can think of observable as a wrapper around the ordinary stream of data in simple words an observable streams the data it sends the data in packets or you can say it sends the data in chunks it does not send all the data at once it streams the data all right now i mentioned that observable is not native to angular or javascript it is provided by another javascript library which is rxjs so the rxjs is a javascript library that allows us to work with asynchronous data stream and rxjs is a short form for reactive extension library for javascript now if you want to learn more about rxjs you can visit this reactive x dot io web page here you will find everything related to reactive programming in javascript alright now rxjs has two main players the observable which is the stream of data and the observer which is going to use that data now in order to make this observer use the data emitted by this observable the observer has to subscribe to that observable okay so we can also say that an observer is the subscriber of that observable all right now let's go ahead and let's create a very simple observable to understand how an observable works in order to use this observable we need to import rxjs library in our angular application and this rxjs library is installed automatically when we create a new angular project okay so we don't need to install it manually it will automatically get installed when we create a new angular project all right here i have created a brand new angular project called angular observables and in this project i have not made any changes so if i go to the source folder if i expand this app folder here we have one component which is this app component and in the html file i have not removed anything okay so we have the default html and css here now let's go to appcomponent.ts5 so here we have this app component class and the first thing which we need to do is we need to import observables from rxjs library so for that we can say import observable from rxjs okay now let's go ahead and let's create a new observable so for that let's first create a variable let's call it maybe my observable okay and to create a new observable we can use observable constructor for that we can say new observable now to this observable constructor we need to pass a callback function and this callback function will receive an argument which will be the observer and this argument will be injected by rxjs library and this observer is nothing but the subscriber which is waiting for the data okay now inside this callback function let's first log a message using console.log and let's say observable starts okay then let's go ahead and let's emit some data and to emit the data on this observer we can call next method okay and it will emit some data let's emit the string value one from here in the same way let's also emit other values so let me copy this line maybe five times okay and let's change these values so from here let's submit two let's submit three four and five so this is the data which this observable is going to emit which it is going to stream all right so our observable is ready now this observable will only emit the data if there is a subscriber okay if there is no subscriber in that case the observable will not emit the data so let's create a subscriber for this my observable for that let's first go ahead and let's implement ng on init method and in order to use this ngoninet method let's also implement it from onit interface so let's use this implements keyword and we want to implement on init okay and in order to use this on it we also need to import it from angular co all right inside this ng on init let's go ahead and let's subscribe to this observable for that let's say this dot my observable dot subscribe now this subscribe method takes three optional parameters and these parameters are callback functions so the first callback function is next the second callback function is error and the third callback function is complete and all these three parameters are optional okay and all these three are callback functions now we will talk about this error and complete in our next lecture so for now let's remove it because these are optional parameters and this next parameter is a callback function which gets executed every time this next method returns a value okay so in this example when we are subscribing to this my observable this next callback function will be called five times because this observable is going to emit five data it is going to stream these five data okay so here let's specify a callback function using this arrow function syntax and this callback function is going to receive the data which the observable has returned or emitted okay remove this all right so in this val parameter we have the value which the observable has emitted now how do we want to use that value for now let's say we simply want to log that value in the console for that let's say console.log and let's log that value okay with this let's save the changes and let's go to the web page let's open developer console and here you can see the data has been emitted by the observable and it has been logged here as you can see okay now this data has been streamed one by one so for example first this data was emitted after that this data was limited after that this data was emitted and so on okay so the data has been streamed here all these data were not emitted at once they were streamed and this is how an observable works now let's do one thing let's emit these data after a certain time interval so for that let's go ahead and let's use the settimeout method okay so this set timeout method takes a callback function and a time interval so for the first data let's specify the time interval as one second and what do we want to return we want to return this data one so let me copy it from here and let's paste it here okay and let's copy this same set out set timeout method for more times and let's comment this code here i'll keep it for your reference all right now here we want to emit 2 here we want to omit 3 4 and 5 and let's also change the time interval here so we want to emit this second data after 2 seconds we want to emit the third data after 3 seconds the 4th data after 4 seconds and the 5th data after 5 seconds with this let's save the changes let's go to the web page and you will notice that first one is limited then two then three four and five okay so in this way these data have been emitted after a certain time interval all right so this is how we can create an observable in angular or in javascript now there are also other ways of creating an observable and we will talk about it in our next lecture so this is all from this lecture thank you for listening and have a great day

Channel: procademy

Views: 90,320

Keywords: Observable, angular, angular tutorial, complete angular course

Id: V4iMyVnQPqM

Length: 14min 15sec (855 seconds)

Published: Sun Feb 27 2022