Observable in Angular 13 | auto refresh after database update | communicate components using service

hello everyone welcome to nera techies in this video we are going to talk about observable in angular so what is observable how we can use observable in our angular application and also its features like subscribe promise pipes how actually we can use what are the use cases everything we can see in the details and also at the end we can see one real time data update so when we are updating the data it should be updated in the grid also so we will see everything in the detail so let me explain the concept of observable first so the observable is the sequence of data which will emitted a synchronous over the period just to consider this block as the client we will make requests from our client so after that we will get response from our server we will display in our client that is the basic logic for any application so just imagine i am have the data in progress i am making the request i got the response so i displayed this in progress now the data has been changed completed but still my client is showing in progress only so avoiding that we will comes up with this observable concept so the observable will check for every time frequency as if there is any data change if you are subscribed the data automatically gets reflected and also subscription is very important in observable without making the subscription this observable is nothing so we will see everything daily while doing the code and some important notes about the observable so basically observables comes from rxjs library so if you are using the angular 13 it's defaultly installed otherwise we have to install the npm package so we can make observable in the three ways one is basically the rxjs providing the off keyword using that we can convert any array into observable at the same way the observable the class one is there using this new observable we can make any observable thing so the third one is very important one mostly we are using in our angular application we are consuming the external services that time also we can use the observable so so let me explain one by one so i'm going to explain our first example so i'm going to have one array using this off operator i'm going to make this array into observable edit first let me import the rxjs here import from rxjs it's a leading shell so the operator is operator is off and now i'm going to declare the array my array name is user and also i am going to declare the observable variable if you are declaring the observable variable you have to mention this dollar symbol so it's not a mandatory thing but this is the best coding practice so you have to use it okay fine now i'm going to set some values to my array so this is all about my array so let me ascend into my observable variable the off operator here this dot uses but it's done so let me console it we can verify if you see here the observable is coming this is our first example then let me explain the our second example with new observer so i am going to create one new observable here so this observable also belongs to rxjs when i added here it automatically gets imported okay done so here i am going to add the data with some time period then only we will understand the data change very clearly so i am going to use the set timeout for that so the time interval i am giving two seconds and let me add some values in the absorber so initially i added in progress the same code i plan to copy and paste two times so the next request in four seconds and the final request in six seconds so the status is in progress to bending the final status is completed okay we created our observable let me see in the browser if i see here there is no change so as i mentioned the any observable without subscription this is nothing so i have to subscribe it first for the subscription okay when a subscription time i will have the option is result then the result only i will get the data so let me add this data in the console if you see this data you will get some better understanding i hope okay if you see here initially no value then it's in progress now it's bending so finally it's completed so the three status in the particular time period is generating so we can bind the value in the ui also i'm just going here i'm going to add one h2 tag so the current status is so let me use the interpolation concept the same time i have one variable here so the variable name is current status so let me assign this value here so this dot the current status equal to result and also i need to bind this value in the html slide so now see the output so the current status is empty now it's changed into in progress then now it's bending it's completed if you have the value in our observable array the values gets updated automatically so the third example is very important one this is mostly people's are widely using so real-time uh data consumption from any external services for that i am created one separate page so the destination if you see here the first section the code and the name this is actually one of the table and the second set is a code and name this is actually our add screen both are the separate component let me show in the code if you see here the both things are coming from this dasg main component here i called the first one is listing and next one is add screen so we can complete something from our listing first first let me create one service ng generate service then our folder name is service so then service name is dhd okay create our services gets created so in the service first i need to inject the http client and also in the model we need to import the http client model so it's already done you see here it's already updated and also we need to add in the import site it's added so let me implement the service first so this is my service url i'm going to mention is apa url so the first method is getall so this method will return this dot so here i need to pass the url that's it so in the angular defaultly it will return the observable only even like the same time i can mention this is the observable object here so the observable okay done so object okay this is all about our service let me do the changes in our component side i'm already have the constructor so let me inject the service here so our service is dest service so it's added now let me consume here start service dot data okay if you see here this method actually returning the observable object only so let me subscribe it first so i'm subscribed and i'm going to add this is for the best list so in the result i'm getting the data okay fine the changes is done so basically we can subscribe any observable data at the same time we can do the true promise also if you are subscribing even there is any data change in the our observable list side it's automatically gets updated but the same time if you are using the true promise so it's cannot be updated it's a one-time request if i say the use case means the one-time request some otp or like so it's once we received the response it cannot be changed any time in this scenario we can use the true promise otherwise if you are loading any listing means it automatically gets updated it have more data change in that scenarios you should use the subscribe so let me explain the two promise also the get back code method first we can complete the subscribers so the data start get added let me see in the browser okay the datas are not loaded now need to call this get method in the earnings this dot so get up so the table is loaded now here the problem statement is so whenever i am adding any data changes here it should be updated in the table also so the thing is whatever table we are seeing it's from one component this add a section in another component so we are not going to implement the complete code operation here i am just going to implement the logic for the update so we can see first let me complete the service side if you see in the service side so get all method only we have completed let me complete the get by code so it goes from input code any we need to pass it okay this is done the final one is save so the save we have the input data so we will get some object as the input so return the start http our method is post method so here also we need to pass over ap url and also our input data so now we have done the service side so let me load some data in our add section so let me call the get record method here for that i need to inject the constructor first private so our service is dusty service it's fine here i'm going to call the method service dot get by code switching s1 input so here i'm going to use the true promise okay if you are using the promise you have to use this then method so this is the syntax so let me assign this value into m data if you are using then and i'll show you how to use the catch option for the exception handling even if you are not using the catch also it works fine but if this is not the correct approach for the coding practice so you should capture the error also and finally if required you have to use this one so i am explaining the syntax okay great let me format it and here i need to pass any of the value so let me pass this tester here and once the values is coming i need to bind in the controls so this dot so basically i will get values everything from here so nice code and another one is name so as of now the typecasting we have not done so it's anonymous type only so i will explain the typecasting also so let me see now so if you see here the data's are loaded so the same time i'm going to complete this summit from schwelty also for the summit i have the function save description so here i'm checking the form data values are valid or not if it's all valid i have to call the post method here this dot service dot save so here i need to pass the form value this is the basic thing already explained in my third operation video using the reactive forms so let me subscribe this one also so now we have completed so if you see here the tester the name is test lead so i'm trying to make this is that just test lead if i clicking here the data actually gets updated but if you see in the table it's not reflected so if i refreshing the screen now i can see the test lead is updated this is actually our problem statement also so let me explain the concept and if you are using the same component means once the save from soldiers are get completed the load method we can call once again but the current scenario is both are coming from the different component so let's implement the logic so first i need to make our changes from our service side only here we have the our getall method and also our save method everything in the same place but we are consuming both the services in different components but the service is common for both so let me declare one variable here private refresh required equal to so new subject of so this subject also belongs to rxjs library only so here i'm going to return divide so the variable is gets declared and also i'm going to create one getter property so let me make this the uppercase so this scatter method will return the this dot okay that's it now i am coming to the same method here i am going to use the concept of pipe so inside the pipe i am going to use the tap okay in the tab method i am going to change the value of the refresh is required so the refresh is required next okay we have completed from our service site so the scenario is when you are creating that means or saving the method so this refresh required is automatically gets updated initially it's don't have any value now i am coming to our list method the component side here i am going to subscribe the particular declared refresh token dot the reference required so let me subscribe it okay the subscription is done so inside that i am going to call this get method okay the coding say done let me verify from our browser so i'm going to change the name is technical team lead so i'm just going to update so when i am updating the values automatically gets updated the same way i can do some another record also so the get by code method okay here i am passing the developer now so the developer record is loaded so i am going to make this is the angular developer so when i am clicking the submit you see that angular developer is gets updated and also i plan to make the level just true so without refreshing the screen it's automatically gets updated as we mentioned both are in the different components but the datas are get reflected as i mentioned the particular refresh required value gets changed so the particular area gets triggered here we actually called our getall method so in order to we have loaded our data so the final one is typecasting so as of now we are just used the uh whatever data is coming it's a anomies type we not used any model or interface let me explain that concept also here if you see here one interface also there this export is keyword is very important one if you are not mentioned the export you cannot able to use in your any other models even i can define this interface in any of the components or services but i need to use in the different places that's what i created is a separate file okay let me come to our my services so here i'm taking the get by code method initially we have used the observable object only now i am going to make us that destination okay now it's showing some error let me change here also okay done now let me go to the component so basically the result is coming here so in the result if i clicking the dot now i am getting the code and the name initially we don't get anything after doing the typecast we are getting the values so in that way we have to use the typecasting in our angular application still if you have any doubts or clarification please post in your comment box and also please don't forget to subscribe my channel if you like this video like and share to your friends thank you

Channel: Nihira Techiees

Views: 28,942

Keywords: what is observable in angular, how to communicate between 2 the components, basics of observable, how to refresh table after data update in angular, promise in angular, what is pipe in observable, type casting in angular observable, settimeout() in angular, real time data update after modification of data in angular, how to use tap in angular, how to populate recent data in angular, basics of rxjs, rxjs, auto refresh after database update, use of observable in angular

Id: MbDDWZZK2Yg

Length: 22min 47sec (1367 seconds)

Published: Sat Jan 29 2022