28. Implement Shared Loading Spinner Component in the Ngrx Shared State - Angular Ngrx

hi friends this is leela welcome to my channel now in this video what we will try to do is we will try to add the loading spinner for this login thing why because so when we are trying to submit here test ratetest.com and one two three four five six here when we are trying to submit here we know that api call it is being made but we are unable to see here if it if we add any loading spinner like that it will be very easy for us so redux in the redux also we are able to get the login success and the user data is getting stored here to observe the state so now we will try to add the loading spinner so if you want to add this loading spinner we can use this loading spinner for wherever we are calling the api calls we can use that loading spinner and upon success receiving the data we can hide that loading spinner so that means we can use it in everywhere so what we will try to do is we will try to create it as a shared shared thing so now what i will try to get is ng gc shared components loading spinner so i am creating it across the components now what i will try to do is instead of creating shared module and all those things this this course is mainly targeting about the ngrx right what i will try to do is i will try to add it in the app module only if you go into this app module here if you try to see the loading spinner component has been added okay now what i will try to do is so here let's go to the loading spinner let's try to do the some design now if you go here and if you try if you search for pure css loader okay so i will be having one loading this this is the pure cs loader i can copy this one so let's copy this all css and paste it here in the css folder css file sorry and here they will be giving one html also i can copy this one and i can do this html paste it here also okay this is the loading so now here instead of showing it as a white color what i will try to do is i will show it as a black color whatever the color you want you can use it now this is the loading spinner we had it now we need to add it add it to our project so now where i can add this component so one thing what we can have where we can add is in the app component why because every time when we use this show loading if you ask show loading means it should be available the component should be available we cannot go and add it to each and every module we cannot do it so one component where it is loaded all the time across the modules is the app component of course app header also it will be loaded you can use it in app header also right now we'll store we will use it in the here in the app component app loading spinner okay so this is the app loading spinner if i refresh this page what you will be trying to see i am able to see the loading spinner here at the top i am able to see the loading spindle now we will try to do some design for this one okay now if you go to the loading spinner dot html here i will use some do class is equal to loading spinner okay now here i will use this loading spinner and if i go to the if i i will write here something like loading data okay now here i will use this loading data and what i will try to do here um if you go to the css yeah here i can write something like loading spinner now here i can write position of type fixed okay position off right fixed and what i can do here so width i can give the width of something like 20 viewport width i can give and left side it should be something around 40 view port width okay and from top it should be around 30 or 40 percent whatever that you can give and z index i can keep it off something like 99 or something like this okay and background color i can give off hash f f okay so that country what is there inside this one text text align i can give center and another one last but not least what i can give is padding so i can give some padding something like 20 pixel let's try to see the output here if i try to see that yeah i'm able to get this one so let's try to add a border or box shard if you want to give box shadow you can use right now i will give only the border okay a or something whatever you want you can give oh if it refreshes yeah i got the border so loot nice looking loading symbol what i will try to do is i will try to add the backdrop also if you want to add the backdrop i will write at the backdrop also here what i can do here do class is equal to backdrop or something okay so this backdrop i will copy and here what i will try to do backdrop so this one is also position position fixed i can have fixed so it should be of top 0 pixel from top it should be and the width should be of 100 percent and the height also should be of 100 okay and background color it should be of background color it should be of rgba opacity also we need to give right so rgb of zero comma zero comma zero comma zero point five okay so and the z index z index will be 98 it is 99 right so 98 i will give it now if i try to see see nice looking so box shadow like that we have shown so now what what i will try to do is so this one it should not it should be shown when the loading when when we are submitting the data to the api so when we are successful we need to remove this loading symbol so what how can we do this one now we need to do it through the state management so how we can do it through the state management is so as this one is a shared component so this this state we cannot keep it in either posts or either in auth state why because we cannot keep it in the auth state if we keep it in our state it should be confined to only to the auth margin so tomorrow for the post for the post data if you want to use this one for the post data if you want to use this one you cannot use it so for example here slash post if you try if you want to use this for the post it will this the statement the state will be available only to the auth by because we are using only for the auth so now here the posts also we need to add it again right in the post in the post.s here also we need to add it again so this this will be a tedious job for us so what we can do so we can create a new state so that is a shared state which will be available all the components all the modules that state data will be available all the components in all the modules right so you can have a doubt that so what again what about the other data earth data also should be shared across all the data right so for example if you have a token in the post data if you want to send the token so we need to get it from the auth so so counter also we need to get it there from the auth so what can we do like that so we will also keep that one in the share chat afterwards he'll keep it so i will show you i will show you this one so now let's go to the in the app let's close this all the modules let's go to the store here i will create one shared folder and here i will create something like share dot state dot yes okay now here i will what i will write is export interface so this is a shared state shared state okay so here i will be having show loading of type boolean so this is the variable state variable which is responsible for show loading and here i will create initial state of type shared state okay so now here what is this one so i can remove this one so i can remove the shared state and is equal to so show loading initially i will keep it as false okay we should not show initially okay so this is the shared state now what i will do is export constant this one i need to export it so now what i can do is i will create shared action share dot actions.ts and here i will be having export constant set underscore loading underscore action whatever the name you want you can give so here what i will try to do is shared state set loading spinner whatever the data the name unique name so export constant set loading spinner okay so now what i can do create action create action and here i will be using set underscore loading underscore action here i will try to send the props here so the props will be of object and here i will send status of type boolean okay so this is the action what will because so here i will be sending the status whether true or false so according to that action what i will be trying to send so it will be making the spinner true or false now what i can do is here i will try to create reducer dot reducer dot ts i can create another one shade.reducer.ts and here i will be having export function shared reducer okay and here i will be having state and the action and here what i can do is return underscore shared reducer so now here i need to send this state comma action here now what i can do so this reducer i need to create it constant underscore shared reducer this is all common so we have what we have created how we have created cm like this only will be creating initial state so it should be imported from the shared state so on so now what i'll be having uh set loading spinner sorry serial number serialize set loading spinner so for this one you will be getting the state here so for the state also you will be getting the action now here what i can do return state and here what i can use is show loading right we are having no action dot status okay so we are setting the loading spinner so using the set loading spinner action we can make it true or false by sending the status now we can have another one nothing but the share dot selector dot yes okay so now here i will try it export consent shared state name shared sheet name i will be having here share it okay so this is the shared state name so now here we have created the shared state name now we we have the shared state now where i where i need to add this one so where where i need to add some so do i need to add it in every module here so here in the store model for feature do i need to add the state everywhere no what we need to do is as this one is shared across all the modules what we can do is we can share it in the we can add it in the auth module so here in the app module so for root it is empty right we can add it here directly and in the app state we are already having this one right so app state if you go to the app state so here we are not using this abstract now what i can do so here i can remove this one and i can use this shared state name directly okay so that is nothing but shade so here i can use the shared state okay so here i can use the shear shade whatever the state it should be shared across all the modules you need to add it in the app state so if you want some state something like that it should be shared across only for a particular module means you can add it as a feature module so here in the app reducer i can remove this counter counter why because this counter and all those things are the feature feature state so i can remove these all the things and in the app producer i can use shared state sorry shared state name colon so i need to add the shared reducer so we are not getting the shareholder reducer let's import the shared reducer okay so here i will be having shared slash share reducer right so now here what i can do share it right user so let's add the shared reducer here so shared reducer we have added now in the app reducer we are having right now we let's go to the app module and we can remove this all sorry not fx module so as store module and let's re-add this app reducer now it is having the shear state across all the modules now i can use it easily across all the things so now what i can do let's open this one so let's say you open the selector now what i will try to do is so here i can create constant get shared state get shared state is equal to create feature selector of this one is of type shared state we need to get the shared state and here i need to give the share state name okay now i need to remove this art input why this auto input is coming i don't know so now here i can export constant get loading i need to get the loading right details so i need to use it in the components so create selector and i can use this get shared state and i can use this state so that i will return state dot show loading okay whenever you want to get the data from the components you can use the show loading now where i need to get you use this show loading here in the app component why because we are having the spinner in the app component now here in the app component.ts i will i will take one show loading variable of type it will be returning observable of type boolean right so now we will be getting after boolean so we are getting as it from the state so that is the reason so it is will be observable now what i will try to do here implements implements on init okay so implements on init so that means what i need to do mg on init i can use ng on in it so this is engine in it before engineering it what i need to do constructor it should be there and we need to import the store private store is equal to store of type app state okay so we have imported the store and in this ngrnit what i can do this dot show loading is equal to this dot store dot select what i need to do get loading sorry get loading okay so this is the thing where we will be getting this show loading is an async so that is the reason what we can do here star ng if is equal to show loading of type async okay so we can use it directly as an async now here if you go and if you try to see here the output so it is saying the abstract why all the time i will try to write this abstract if i am writing also it is removing away oh again this one is coming as a comprehensive in all my videos i will be getting this one okay now let's open this one so now we let's go to the login here now we are not able to see any login now if you try to see here if you go to the shared state so if you go to the shared state here if i make it true you will be able to see see now if you try to refresh this one now you'll be able to see the loading why because this is depending on the state management now if you go to the reducer sorry in the red x management if you try to see here in the red x and if you try to see the state here here you are having the shared state so that is it is showing it is a show loading true if you make it false now the it will go away okay now it will go away now you will be able to see it will go away see now we will try to apply this one in the loading so when we need to apply whenever we are trying to whenever we are making the call so apa call we will be showing that loading true and when it when we got the data success data we need to make it false so where can where can i make it that one so now let's go to the auth effects okay in the state in the art effects this is the art effects and here if you want you can make it so here we are making the service right so be just before making the service you can call it here or otherwise you can go to the login component.ts this is the place where the starts where it starts the the login starts so here also you can write it this dot store dot dispatch right dispatch set loading right let's set loading spinner and we need to set the send the status so what is the status i need to send true true means i need to show this one so immediately it will show it so here the status will be true now we are showing now when i need to make it false when immediately i got the data so when when i will be getting the data here in auth effects so auth effects is the responsible guy who is making the call so here i need to inject the store here automatically we can inject it private store of type store okay so i can use this abstract so i used this abstract without any problem okay now here return constant map yeah here is the data we are getting successfully the data right and here what i can do this dot store sorry this dot store dot dispatch what i can do here set loading spinner status sorry status false so i need to make it status false okay so we made the loading spinner false now let's try to see the data so now without any problem we got the we got the page is loaded now tested test.com one two three four five six now click on the login see now we are able to see and when we got the loading success the loading screen has gone away now if you try to see here first loading spinner is loaded okay by making the uh action action true status true so in the component we are trying to call and immediately login start has been fired and then again after getting the success data so now first we are making the loading spinner false and the login success is called the same scenario is going over here it is making the loading spinner false and again it is calling the login success so whatever the day whatever the thing we have expected we have we have did it so now here the store.dispatch we can use it this is the same manner in every module in the post module everywhere you can just simply call this store.dispatch reset loading spinner status true status wall status true means it will show the loading spinner status falsely it will not show so in the fall in the in the error that also will try to do it in the next next video errors error thing so we'll try to show it the data okay it's a loading spinner now this is how so now this is how we will be doing the loading spinner so across all the modules we are using the shared state we are using the stair share shared state across all the modules so this is how we will be using the shares across all the modules so this is how we'll be using the loading spinner so the data the project if you want to see this all the project and all the all those things it is already hosted in the github so if you want to have this code you can have this code here in the github slash lelanarsimha if you go here so you'll be able to see this ngrx counter in this ngrx counter i will be committing each code each video i will be making one branch and i will giving you the code so you can have a take a look if you have any doors while implementing so you can have a take look here if you have any doubts or any sessions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 12,468

Keywords: angular, angular ngrx, angular tutorial, angular input output, angular emit event between components, angular emitter, angular eventemitter, angular eventemitter tutorial, ngrx store, angular state management, ngrx store angular, ngrx selectors, ngrx tutorial, selector props, learn ngrx angular, ngrx forfeature, ngrx store tutorial, ngrx effects, angular ngrx effects

Id: EDvx8avc094

Length: 21min 16sec (1276 seconds)

Published: Sun Dec 27 2020