Loading spinner in angular with NGRX | Material UI Progress spinner implementation

Hello friends welcome to my channel hero techniques in this video let's talk about how to implement loading spinner in angular application for doing this implementation I am going to use this materially way progress spinner component and also the implementation point of view we can do from the particular model and also the complete application Level that means the global implementation okay now let me go to my application here first I am going to create a new component for implementing the loading spinner the common name we can provide loading spinner okay okay the comment is created we can take this selector I am going to input this into our app.com Network okay okay this is fine so I am going to use the material away spinner so let me import the required model so the common name is braggress spinner okay matte tracker spinner model the model name is including this export side so then it will be automatically imported in our app dot model so next let me go back to our component side so whatever code currently we have let me remove everything I'm just added one due tag inside that let me use this matte progress spinner next I am going to include the value so let me provide the default value is 50 okay you know since this bottom corner we are able to see this progress winner and let me include a more property mode okay I provided indeterminate so let me save this one see now it is rotating and the color we are able to see as the blue color so let me change this into see the color also got changed okay so next to what I am going to do let me include some custom CSS for making this into sender and also make sure the whole content should be disabled okay I just added here so we can save this one and next let me take this class so in this Duo I'm going to include this class so similarly let me create one more due tag and next to the spinner class okay see the response now so the whole section is disabled and also our spinner is loading for controlling this one let me declare one variable also and let me create one Constructor the future it is needed is loaded so the default value let me provide false so let me copy this one next in our HTML side we can use this in Chief okay initially this disabled okay okay this is the basic implementation of material UI progress spinner okay so the same thing we can apply for our ngrx concept so I'm going to implement for our black screen example okay for this edit update delete and the initial load we can include the same Target spinner now let me go to the ngrx site we can start our changes from this model okay so here we have this blog list and error message so after that let me include is loaded at the data type we can provide us Boolean so let me save this one next in our state in this initial state we can provide the value as false okay then in our selector I am going to create one more selector get spinner state we can just return this one is loaded okay next in our action I am going to declare one variable we can provide the name is load spinner similarly our action load spinner okay and in this props we can pass this is loaded at the data type is Boolean next let me move on the reducer side so in this reducer side I am going to include one more section and here I am checking the action is load spinner so I am removing this section it's not needed and here we no need to assign the block list value at the end I'm going to setting the value for this is loaded from the action I will get the input instead okay so this is the basic change similarly for our other methods so like this initial load page once our action is completed make sure we have to set the values into false so let me copy this one we have to include all the places because once our action is completed obviously we have to stop the spinner so that's what I have including like this it is applicable for the error scenario also and finally we have changes in our effect side so in this success scenario there is no problem we are dispatching this load blocks access so obviously in this reducer side we have included the changes so in this year scenario we are just dispatching this load block fail okay basically it is showing the alert message only so here I am going to dispatch on more action so that is our load spinner okay so this one also having one props we have to set the values into false so let me copy this one we have to include for other FX2 and the next number updates and finally this delete okay let me save this one next let me come back to our component side so in this TS I am going to inject the store and also let me implement the NCR in Hook and here I am going to subscribe our selector okay restart store dot select and our selector name is get state so let me subscribe this one so this dot is loaded equal to response so let me format this one okay this is fine next let me move on over block component okay so in this initial load we are dispatching this load Block action okay so before that let me dispatch one more action so that is nothing but our load spinner and the props I am going to pass this into true we have to maintain the format then only it will work so let me refresh the screen now okay so the spinner is coming and it is moving very quickly so let me include some timeout okay so let me provide 1000 milliseconds and we can move these functions into inside the timeout so now if I'm refreshing so now we are able to see our spinner after some time our datas are loaded and similarly the spinner also disappeared okay so let me apply the same Logics into our other functionalities so let me copy this one okay first in our remote scenario I mean this delete I just added inside the timeout only I am dispatching this one okay at the same time so once the action is started I am dispatching this load spinner with the value of true so let me remove this one see we are able to see the spinner so remove the successfully and also our spinner is disappeared okay so next let me move on this this add block component so let me copy the same changes here in this update and create what are we are handling from this save blocks itself I'm just added here okay and we have to import this load spinner okay add in this complete section I can move into the timeout area now see I am creating a new record see the spinner is loading and we got a message created success player and also it is reflected here okay see again the spinner is loading so finally it is updated okay so this is the way we how to implement the loading spinner in our angular application using ngrs concept so here the thing is I just implemented for this black screen only okay so let me show here so in this model itself this is mainly created for this black screen only so here only I'm just declaring this East loaded variable so the same variable only I am using in our loading spinner common okay for doing this application Level implementation we have to move this complete logic into a separate section so already I have created this Global okay so here we have this app State model okay so in this Upstate model I just use this counter and block so basically it is not required so so instead of that what I'm going to use just is loaded and the data type is same Boolean we can remove all other items and the next thing is we have to create one state so already I have a file with the app.state but actually here I am doing this combine reducer okay we can create one more file and providing the name is global.state so next export Global state and App State model is loaded equal to false okay our state also ready next we should have the reducer so let me create one more file app.reducer so let me copy the complete code from our reducer side I am going to include it here so instead of this block reducer we can use approducer okay uh producer just added and we have to import this create reducer and here the initial state is Global state only okay so let me remove all the items these are not needed we can have this load spinner that is fine and we need to import this on so let me format this one so next we have to include this reducer also in our combined reducer so that is available in our app.state okay ah producer and here I am going to create one selector also app dot selector that yes okay so the same way we have to copy everything I just added in our app selector so first instead of the black state let me provide a snap state we have to inject these functions and I'm going to remove these all the functions so we have to import this create selector also load spinner so here I am going to return this is loader so let me save this one finally this action site so I already I just included some action in our black deduction so let me cut this one I'm moving this into a verb App State I mean this app action and this one also so we are getting so many error so I just removed and here also this function is not needed and next in our effect side so this load spinner I'm just a remote so after that we can include once again okay so now the error got resolved so next in our app dot selector and here also let me report it once again load spinner okay okay the most of the changes are done next in this component point of view so here also same I have to do for this add block component also so the most of the changes we have done now let me go back to our loading spinner so here we have the selector from this blog and also This Global we can use this Global okay so the block actually it's not needed we have to comment everything so I'm just added here okay I'm getting this error so let me verify okay in this stage okay basically here I have to pass the state only okay now the error card result okay so now if I'm trying to refresh the page so see now the spinner is loading it is not starved so the reason is so now our load spinner action working based on the global State okay so previously we handled from our block State itself so here after the block state is actually not needed and also we have to include some other changes from this component and also the effects okay first here what we can do so initially we provided the value is true once it is dispatched this load block we have to dispatch this action one second with the value of false so let me save this one so the load is fine okay so next what I am going to do let me include the changes for the other actions for the other actions I am not going to directly include it here so instead of that I am going to include it in our EFX side okay so before that let me remove this guest load variable from our block screen so let me go to our blogs okay so be only added so instead of completely removing I am just commenting okay for the reference we can use so state next in our model and in our selector so this selector also it's not needed so anyway let me comment this one okay and it never reducer so the reducer we already removed that particular section and this is load of false okay so that also we can command next let me move on there if it said okay we can go one by one first let me take this add block so in this add a block this failure scenario we are dispatched this load spinner false so let me copy this one adding this access scenario before showing this alert let me dispatch this spinner okay so the same thing we can apply for this update and this delete okay this is fine and the final one is load it's not needed because already we have handled from our component side so let me save it see now see this working fine so if I'm creating a new record also testing see finally I'm trying to remove so this is working fine so here after if you are creating any new model also so the same action we can dispatch so wherever the loading is required we have to dispatch the same load spinner action we have to provide the value is true so similarly if you want to start the spinner be hard to pass the probe is false that's it okay so now we are in the end of the video still if you have any doubter clarification please post in the comment box and also please don't forget to subscribe my channel so so in my next video I am going to cover the complete credit actions using ngrx in angular application okay thank you thanks for watching

Channel: Nihira Techiees

Views: 4,429

Keywords: material UI loading spinner implemenation, loading spinner in angular, loading spinner in ngrx, how to implement loading spinner in angular ngrx, loading spinner handling in ngrx, mat-progress-spinner, handling angular loading spinner in application level, how to dispatch multiple actions in ngrx effects, ngrx effects with loading spinner

Id: 0T_mog78IBA

Length: 20min 36sec (1236 seconds)

Published: Tue Aug 01 2023