Angular CRUD action using NGRX pattern and Material UI design | Angular NGRX examples

in this video we can Implement angular predictions using ngrx pattern okay for the designing point of view we can use material UA components for the APA I'm going to use Json serverless GPA okay let's start the implementation so here I provided all the steps we can go one by one first let me create one brand new application so in this command prompt angular ngrx thread this is our application name and we need on routing so let me provide yes at this child sheet we can use the CSS okay application created successfully let me open in the vs code okay this is our application and the second step is uh let me create the required files that includes components services and supporting file for the ncrx implementation first we can start from the components okay NG generate component we can create our component inside the full drop components okay so my first component is associate listing okay this is created so we can create one more component that is for handling this add and edit functionality name is ADD associate okay okay this is fine next we can create one service so the service name is associated okay okay this is fine next I am going to create the model files I'm creating one folder so store so inside the folder we can have one more folder the name is model so in this model I am creating one TS file here let me Define one interface here let me declare the fields the first one is ID the data type is number next to name the data type is string then email next to phone number then associate type then address next associate group at the final only status okay the data type is Boolean so let me save this one next we can create one Json file so inside the source folder First Time created one folder the name is data so instead that I am creating the Json file okay db.json so basically this is the data storage for our Json server AP okay so we can save this one next I am going to create one model class so as I mentioned for the designing point of view I am going to use the material UI components for the implementation purpose we have to import a lot of models okay so for that I am going to create one common model so there we can import all the required models finally we can import the newly created model in our app dot model okay material okay so let me declare our model using the CNG model decorator so if it is not coming we have to import it manually so in this export side we have to import all the models okay so let me save this one so let me save this one next we can go back to our app dot model so in this app dot model in this symbolt side we can import this material model and then we are going to use the HTTP services so make sure we have to import this HTTP client model rectangular common slash http so let me import it here add the data handling I am going to use this reactive forms approach so let me import the reactive form model so let me save this one so next in our routing side I am going to create only one route so the path I am converting the empty value the default one and the component point of view let me use this associate listing government okay next let me move on the app component so here we can see some default Style and some content also there so here we can keep this router Outlet okay other than that we can remove all the things so let me save this one okay we have done the basic changes next we can start the installation first I am going to use this material away okay so then only we can use all the components yes so the theme we can use the default one Indigo pink and then this type of gravity Styles yes include and enable animation yes okay the installation gets completed so next we can install the ngrx packages okay so the first one is ngrx store so once it is done we can install this EFX so the latest package is found we can provide yes for the installation I believe the latest version is 16.2 okay so once the installation completed we can verify from our package.json so next we can install this EFX okay once the effect is completed we can install this router store so let me provide yes for the installation okay the effects are also installed next we can install this router store okay and our final package is ngrx Dev tools okay the installation is completed successfully so we can verify in this package.json so as I mentioned the latest version is 16.2 because this story affects router store and also the dev tools so additionally we have installed this material UI also okay so let me run this application so the command is in G server okay our application is running in the port number of 420 look at the basic text is loading okay so next to we can split our implementation into three types the first one is designing and then coding and the final one is in grx implementation okay so we can start from the designing side so let me go back to our component side we can take this associate listing component so let me remove the existing things and in this material point of view if you are using any of the component make sure you have to import the required models okay for that we have created the common file I mean the common model files so here let me include the required models one by one so the first one is MAT card model okay Mad Card model okay so similarly we can include some of the farm controls also form field then input select control button checkbox and then radio button for the pop-up we can use the dialogue and listing the data we can use this table component so they are pagenation and starting is required so the most of the components I have included if I'm missing something we have to include later also we have to change the limit models okay so basically this model starts from matte and then our component end with the model okay so let me apply the same changes for all the models okay we have done here after we can use the meti relay components I'm first using this matte card also including some CSS changes okay I just included two classes see the output now we are able to see one kind of bugs okay so here I am going to include one button add associate matte raised button okay and the color let me choose this primary and see now so the button also coming so once we are clicking this button I am going to open the pop-up so let me include one function so in this click event from snad so similarly we have to Define this function so in this DS side first we can create the Constructor and then defining this function next we can implement the hook NG on it let me implement this hook next in this Constructor let me inject this matte dialog okay so next for opening the pop-up I am going to create one common function it's having two parameters on this code and another one is the title so code we can provide the data type is number so here we can open the pop-up so this dot dialog since this dialog have this open function so here we need to pass the common first so the com button I'm going to use this add associate component so then we can include some properties so first bit I am providing 50 days and we can include some animation also while opening and closing this pop-up okay so finally we can pass some data here I'm going to pass this code and also the title so let me save this one so next in our function add we can call the same function and the code we can provide default value is zero and the title is create associate so let me format this one so if I'm clicking we are able to see the PowerUp is opened but the design is not at implemented so let me move on this add associate component okay first in this tier side we can include this Constructor okay and here also we can implement this hook so next I am going to initiate our form so based on that we can start our design implementation for that first I am injecting this form Builder okay so the form I'm going to provide the name is also see it form okay so using this Boulder we can Define our form so here I am going to Define all the fields one by one the first one is ID the default value is zero okay and the next field is name so the default value is empty and here I am going to include the validation also so similarly I am going to include the other controls then email phone number address and then type so here the validation is not needed let me provide the default value only okay and then group and the final only status so here the default value is let me provide and in this email field I am going to include one more validation for checking the proper email so what I'm going to do let me include this validators dot compose here it is a kind of array so there we can include multiple validations okay I included this required and also the email validation that's it so let me format this one and in this type find a few I am going to provide two option either it should be a customer or a supplier so the default value I'm going to provide customer we can provide the Caps that also find and in this group I am going to provide three default value level 1 level 2 level 3 I am going to load in the select control so the default value we can provide level one okay so let me save this one so next we can move on the designing area so here also first I am using this matte card so before that let me include one form tag so in this form tag we can use the form group and this form group is nothing but our Farm name okay and let me include one Summit event NG submit and the function name is save associate so in this TS side I am just initiating this function so inside the function I am just checking whether this form having the valid records if it is valid only I will allow for the further actions okay so next in our designing site so let me declare one variable here so the title default value is create associate and in this MAT card content we have to include all the form controls at the end we can include this Mad Card actions okay so here I'm going to have two buttons let me save and the type is submit so this will now see a matte raised button so similarly I am going to have one more button so that is for closing our pop-up so the color we can provide ascent so let me say this one and see the design okay actually this should be in title so you know create associate and let me include some styles see now it is somewhat better okay so next I'm going to include the farm controls one by one matte form field and here let me include this matte label and the label is ID and then I'm including one input control so in this input control matte input director and the number form control name that is ID so let me save this one see the design it is somewhat better okay so the same way I'm going to include the other controls and our second field is name and the third one is email and the fourth one is phone number and the mattress for the address we can use the text area other things are same online and then associate group for this one I am going to use the select control match select we can include this control name so that is group we can provide some default options okay so the same way I'm including two more options okay so let me save this one and we can see the output see now and in this ID field actually I have to generate field in this create scenario it's not needed and this email and the phone number also we can have the same line itself so what I'm going to do let me declare one more variable is get it so the default value is false and in our HTML side let me include ncf okay and in this form field I am going to include one class so that is mat 50. so I just provided with this 48 percentage also included on percentage margin that's it okay so the same class we can apply for our phone see now it is somewhat fine right so next I am going to include two more components one is this type and another one is the status for the type we can use this radio button so the common name is matte radio group and in this form control name we can use this type and here we have to provide two options okay matte radio button so the first one is customer and the value also we can provide the same color let me choose primary for the second option is supplier maybe the color let me provide ascent okay so the same way I am going to include the check box also is active and in this form control name let me provide status it's you know okay our design should be like this only okay so if I'm clicking the save also so that's what we are seeing this red color and in this close button we have to close our pop-up okay it is not closed so let me implement the functionality so in our TSI I am going to inject matte dialogue graph and here I'm mentioning the component so the same way so let me format this one and declaring one more variable dialect data and we can move all the Declaration at the top so in this hook I'm just assigning the value and I'm creating one function close pop-up this data ref Dot close so let me include this function in this unclick event okay this is fine so the next thing is we have to focus on this associate listing for that we need a data so as I mentioned I am going to use this Json server rest API so let me start this APA so in this new terminal I'm executing the command is Json server watch then we have to specify the path Source inside the source we have the data folder then our db.json okay this started and running in the port of 3000 current bits don't have any function so let me include one mtri associate this is our APN Point okay next let me move on the service side so here already we have this Constructor so in this Constructor let me inject this HTTP client and then declaring the base URL and in this service we can Define all the functions one by one so the first one is get on basically it will return all the associate information and we have to pass our AP World okay so in case if you are using some real-time APA it may be developed using Java or a.net you have to provide the exact AP endpoint only okay other than that all are same only and we know our return type classes so that is Associates okay and our next function is get by code and it's having one parameter that is code and the data type is number so in this URL we have to pass this code also and it is returning the single record only and the next method is delete requested type we need to change this into delete other than that all are same only now the next function is update so in this delete there is no return type similarly in this update also so in this update having only one parameters and the data type is Associates and the request is put request and the URL is fine and we need to pass the code we can get it from the object itself ID and we need to pass the same object data that's it and the final one is create and the request type is post and here we can pass just a URL and the data okay so now our service is ready and also our component also available so basically we can inject these services in our component in order to access our API okay so since we are using this ngrx concept we are isolating this services from our component the AP handling everything done through the njrx only okay so now let's start the ngrx implementation so inside the store folder we have this model so I'm going to create two more folders associate and common so here we can create the record files first we can create the file for the state so the name is associate Dot state.ts and the next one is action and the third one is the effect and the fourth one is reducer and the final one is selector so next in our model side I am going to Define one more interface that is associate model so here list and the data type is Associates and the next one is associate object under the final one is here are message and the data type is string next we can Define our state export constant associate state and the data type is our associate model so here in this list we can provide us the default values mtra and in this error message the default value is empty string and in this associate object we cannot directly provide like this add missing properties okay so ID is fine name is fine and in this type we can provide the default values customer and in this group level one and the status also true okay so these are the default values that's it next let me move on to the action side so here first I am going to create the action for loading the associate load associate okay we have a function create action it is belongs to this ngr store only so using that we can Define our action and then we have to provide the type okay so let me declare on variable so the function is node Associates next we can use this constant variable as the type okay okay we defend our action so basically once we discussed this action it will fetch the data from the APA okay so there we can expect two response when is the success and another one is the failure response so let me create two more items for handling this access and the failure goodness load associate success and another one is load associate failure similarly we can create the actions also load associate success and our action type is node actions axis and it is having one crops if the axon is Axis we can get the list of associate information okay similarly in this fail action we will get the error message okay this is fine so next let me move on the effects there only we are handling the HTTP request export class associate effects okay and we need to use the injectable decorator if it is not coming we have to import it manually so next I'm creating one Constructor and here I am going to inject the accents and also our services and associate service okay next we can create our first T effect load associate we have a function create effect that is belongs to our ngrx slash effects okay here I am going to check the action type we can check if it is to load associate using this x-cast map that is the RX JS operator online here I am going to call our services and let me use the pipe option again here I'm just dispatching another action that is load associate success okay and here we can pass the data also similarly if there is any error using this off operator I am going to displace another action that is load associate fail okay here I am getting the error because this map operator is not imported okay result okay so let me save this one I just formatted okay so next in this load associate success and this load assess it fail we can hand it from the reducer side so let me move on the reducer and we can Define our editor also so reducer is kind of a pure function export function so that will return the another function okay associate reducer it's having two parameters it's having two parameters the first one is state and the next one is action and top of that we can create the reducer create reducer and we need to pass the initial state and our initial state is associate State okay and then using this on operator here I'm just checking this action load associate success and then state actions so this on also belongs to this njr store only okay now it is imported okay so in this success scenario first time returning the actual state okay so after that I am assigning value into our list through the action payload we will get the list of associate information I am just sending into our actual list okay and in this access scenario there is no error we can make this into empty that's it so let me save this one at the same way we have to handle the error scenario also I'm just a duplicate it and the steps are same only instead instead of the success action we have to check the failure action okay and make sure it should be important otherwise we will get the error and in this failure scenario it should be empty array and in this error message we can provide this error message that's it so let me save this one but the next thing is we have to register this reducer into our store and also we have to register this effects okay so let me go back to our app dot model so here we can see this store model okay so basically when we are installing this ngrx store so these models are automatically imported so if it is not happen we have to import it manually okay so let me include it here associate associate reducer that's it the same way we have to register the effects associate the effects and this routing for the current scenario it is not needed so let me command this one and this Dev tools it's fine only okay okay we almost done and the final thing is selector okay so obviously once we have the data from our state using the selectors only we can fetch the data so let me Define my selector first we can Define one feature selector get associate state and create feature selector and the number model is associate model and here we have to provide the object this object is nothing but when we are registering this reducer into our app dot model so whatever instance I have provided here the same instance only I supposed to use okay there is an spelling mistake and just included here so next we can Define our actual selector so this is for getting the list of associate so get associate list for creating the selector also we have a function that is create selector here we need to pass this feature selector value so see here we can return this here message or associate object and also the list for the current requirement I am just returning this list okay so the ngr site changes we have finished now let me go back to our component side in this associate listing in this initial page load I am going to dispatch the action that is load associate further let me inject the store stories belongs to this ngrx store only and let me declare on variable associate list and the data type is Associates and here we need to use our selector that is get associate list and this is the observable data so we can subscribe this one so whatever data is coming I am just signing into over associate list okay so before that we have to dispatch the action so then only we will get the data and our action is load associated so the concept is simple from the common one we are discussing this load associate action so the request is directly goes to our effect side from the effects we are calling our APA so once we got this access response here I am dispatching this load associate success action so then in this reducer side we are assigning values into our state okay so once we have the value in our state using this selector we are fetching the data the same data only I am just subscribed here so let me include the console log so this start associate list okay in this console we are getting the error cannot read the property of undefined so looks like it is coming from the selector okay the selector it is look like fine so next let me mod the reducer side okay so now I understood actually we not returned this function so actually this is our reducer class here I supposed to return this one see now we are getting the empty array only so looks like we don't have any data so let me include some static data in our service side I'm just added one set of record okay so let me save this one now if I'm refreshing the screen I am able to get the same data okay so similarly if you are installed the Redux package so we can verify from here see so this is the initial request so in this time in our state there is no data once this load Associates success see from this list we are able to see this data so the difference it is just included this much of data only okay so anyway it's fine we are able to retrieve the data from our API the next thing is we have to bind our table so let me go back to our component once again so in this Mad Card content we can use this table and we need to use this matte table decorator and then in this data source we have to include the same data and styling purpose I just included on class and the next thing is we have to Define all the columns so in this TS side displayed columns so this is the string array so here we can Define all the columns okay so the first one is code and the next one is name then email next to phone number so similarly including all the columns okay so additionally I'm including one more column that is for the action so let me save this one next in this HTML side we have to include the rows for the header row we can use like this matte header row we have to use the created array using this matte header row definition and the next state here is for the mat row next to using this yenchi container we can include all the columns one by one so the First Column is scored here let me include this th and the TD let me use this Mar header cell and then cell definition and we can provide the value code since this TD side I am using this math cell and then you can use like ID so let me save this one okay looks like it is fine let me see the output now okay we are getting the error like cannot bind the data source since it is not the non-property of table so let me verify the table okay so actually that direct you should be like this match table okay also this star is not needed so let me save this one see now we are able to see One content but actually it is expecting all the fields should be added okay so the same way let me include the other fields and the second one is name from the service also we are getting us the name only okay so let me add all the columns one by one and the final one is for the action so here I am going to include two buttons okay so let me remove the existing contents so let me include the button also in this edit and another one is delete also in our TS side let me declare one more property and here we can assign the values to this variable math table data source next in this HTML side we can use this one why I am including this class means we are going to implement the Sorting under the page nation that so that time it will be more helpful okay okay this is added so anyway let me verify everything once again okay in this NG container yeah actually so here also we need to include this takes and TD so in this TD only we are adding these two buttons okay and the column definition is action that is fine so let me save this one okay see the output now the data is loaded fine so this phone and Associate group the data is not loaded so let me verify okay from the service it is the mobile so let me change this into form so this is loader and similarly this associate group okay it should be an associate group so I am just assigning the value based on our model and the same way we have to include in our HTML said also see all the datas are loaded fine and in this status also if it is the true we can see this active otherwise it is inactive so let me apply one small condition here so next let me include the page nation and also the starting first let me include the page Nation okay for the page Nation so after this MAT card content let me include this matte card footer and the match paginator that is the common name so we can provide the options are 5 10 50. okay and also we are enabling showing the first and last button see now it is somewhat fine okay and then we need to map with the data so what I'm going to do so in this TS side first let me access the page Netter using this view child option match paginator so the same way match shot next in this data source we can include this page generator for the same way for the starting punctuality so you know currently we have just one record for doing the testing let me include some more records okay I'm just including six records and just changing this ID other fields are same value so now if I'm refreshing the page so totally I have the six records so the first page I loaded the fire cards in the second page I have single record so even if I'm changing this into 10 so in the first page itself all the records are loaded fine okay the same way for the shorting we did from the TS side the same way HTML said also we have to include some directives first in this table we have to include this match chart and then in this ticket side we have to include match short header so if I'm refreshing actually we have the same records only we are unable to verify maybe if I'm making some small changes so the name I actually included some alteration Okay so see so now we're starting also working so next let me move on the add associate functionality okay so already we have completed this uh design and also we have used this reactive forms for handling this data so the next thing is we have to work with our ngrx side so the steps are same only so the first thing is we have to define the actions so the first one is ADD associate and the second one is ADD associate success okay so in this failure scenario we can directly show the alert message so the same way we can create the actions also add associate here we have to use the so here we can use the add associate constant variable and also it's having one crops so the data type is associated and in this success action also first we have to include this constant variable and we can use the same props okay so we can save this one next let me go back to our effect side here let me create one new effect okay for handling our post request add associate that's fine just time checking add associate function and in this service let me use this create and here and we need to pass the data basically we can get it from the action .input once the action is completed let me dispatch our add associate success okay and here let me pass the same data and in this yearl scenario I am going to show the alert message for that let me create the separate action and since this alert functionality is the global one we can reuse in the several places so let me create one separate folder the common it's already there so inside that I am creating one new action file okay app.direction TS here let me declare the variable first next hour function create action and it is having the props I am passing two values okay one miss message data type string and the next one is result type so that also the string and the same way let me create only empty action so that's it so next we can create the effects so these are the one time changes only we can reuse in the several places I just added the Constructor I'm just injecting these actions for showing this toilet I am going to use the snack bar alert that is from our material UI so first let me import the required model next let me go back to our app.fx so here we can inject I'm just changing here next time creating a normal function it's having two functions the first one is message and the second one is resulted type so let me provide the default value is fail always and here we can open our alert first let me passing this message then the closing button text we can provide close or else okay vertical position Tab and in this query sandal position let me use the right end okay duration [Music] 5000 milliseconds and finally Panel class here I'm just checking if it is fast we can provide green snack bar so this is kind of class the custom class only okay and let me include some of the custom classes in this style side okay this is fine let me go back to our effects one second show alert create effect here we can check the action if it is show alert then using this x-cast map option I'm calling this function and we have to pass the parameters so that we can get it from the actions on this message add an externalness result type after it is dismissed I mean the pop-up is closed return empty action so let me format this one and also we have to register the cfx so in our app dot model so already we have included this associate effects so after that I am including this app effects also okay so now this is fine next in our associate effect side in this failure scenario here I am going to call this show all attention okay and I am passing the messages fail the true create associate and one more parameter is a cell to type so we can provide if this is file that's it okay at the same time in this success scenario we have to show the success message so what I'm going to do instead of using this X cost map I'm going to use the switch map option and here also let me change this into switch map finally using the off operator we can dispatch the actions okay so let me format this one once this action is completed let me dispatch this show alert also so in this case the message is created successfully and the result type is pass that's it so we can save this one so next let me move on the reducer side so in this reducer let me create one more new section so this is for ADD associate success okay so in this scenario first I am returning the exact state so in this listing we have to do some changes first I am going to include this existing List information okay so after that we can include this action dot input data and in this input data we will get the complete information except the ID because that is starto generated one so let me calculate it manually first let me take the maximum ID okay from our existing state once we have this maximum ID so let me create one more variable new data whatever data available in this section let me take the same one so in this next line we can assign the value that's it so the maximum ID plus one that's it okay so here also we can replace this one that's it okay now we completed in our reducer side so finally let me go back to our common side so in this component side already we have this save associate function here we have to dispatch our action for that let me inject the store here let me dispatch the action add associate input data here we need to pass the data So currently our data available in this form only but we need to convert this into associate objects okay so what I'm going to do let me declare an object and the data type is Associates now we can assign the values the first field is ID so they start associate form value.id and I am converting this into number that's it okay and the second one is name so the same way I'm going to assign the value for all the fields so the field name is associated group but the value is I mean in our Palm said it is the group only and the final only status okay now we have this object so let me pass it here that's it so let me create a new record all but email provided I am so providing on phone number once I'm click to save I am getting this created successfully message and make sure we have to close this pop-up okay my name sector here okay the in real switch is available so let me include the code for closing the pop-up so already we have this function so let me reuse it here that's it I am creating one more record okay so once I am click to save so we are getting this message and also the record is updated in our listing okay so next let me focus on this edit functionality so the first thing is when I am collected this edit button make sure I have to open the pop-up and also need to load the existing data so I believe already I have created the function for the edit now so first in this button let me include like this click event function edit and I'm passing the value so our unique value is ready that's it so the same way in this delete scenario we need function delete okay so let me save this one we can Define both the functions otherwise we will get there delete okay and in this edit scenario so I'm going to open the same pop-up and this time I am changing the title update associate and also the code I am passing the exact value so let me try now see if I'm clicking I'm getting the screen as create associate so the same way if I'm clicking this edit I am getting this update associate okay add in this update scenario we have to load the existing data so let me create one more new action first let me declare the constant variables so instead of the load we can say get this is actually for the individual associate information okay get get associate and it's having one crops that is our ID and the data type is number similarly in this success scenario I am just returning an object okay and today.tps Associate that's it so let me save this one and in our effect side I am creating a new effect so that is get associate I'm checking the action type if it is get associate I am calling this get by code from shorty and passing the code from our action that's it once it is succeeded I have to dispatch this add not add get associate success and in this failure scenario I am planning to show just one alert message it's saying failed to fetch the data so if you want to show the exact error message it's possible actually we can just give like this error.message okay so let me save this one next we can move on the reducer side so we can copy this one first time checking gets associate success and in this state there is no changes and the list also no more changes but in this Associated object we had us in the value okay add some dot opposite and also in our selector side let me create one more selector get associate that is enough and it is returning the integer associate information okay next what I'm going to do in this associate listing side before opening this pop-up I am going to dispatch on action so that is our get associate list and here I'm just passing this okay way I'm getting there let me verify okay how to input the action only so now it is fine and the parameters look like ID okay next in our ad associate component side so in this initial load okay so here we can subscribe our selector get associated it's imported from selector okay so let me subscribe this one once I'm having the data let me assign into our existing form okay using the set value function so let me assign one by one okay we assigned the value okay so let me format this one so now I am trying to edit once again see so the datas are loaded okay failed to create the action so let me check the pop-up so this one instead of the button let me use the angle tag so let me try one second see if I'm clicking this edit button for the Winston it is loaded Vincent so if I'm playing this all bit so that also loaded so here the problem is if I'm clicking this add associate so basically it should cleared everything okay so what I'm going to do let me create one more new action for handling this a pop-up so that we can Define in our associate side itself open pop-up and similarly let me create the action also so let me save this one and in this reducer side let me include one more new section I am checking if it is open pop-up first time returning the existing state and in this crr message is not a problem the list also we can remove for this associate object let me provide the MTM seat okay if it is showing some error and also okay here we have to provide the default values okay so otherwise it will throw the error we can take the default value from our State itself okay so now the issue got resolved and in this add associate component side whenever I'm opening the pop-up it's not here it's in this listing side okay so in this I add a scenario only so in this open pop-up function so let me dispatch this open pop-up okay and in this edit scenario also once I'm open to the pop-up next time dispatching this action so let me close this one so now if I'm trying in this edit scenario it's loaded the data the same time in the sad time the data okay so that and the next thing is we have to handle this update functionality because the existing data is loaded so this is not going to take much time okay because already we have completed this create so most of the codes we can reuse first let me declare two variables so instead of the ad we can provide update the same way we can create the function also and we can use our objects and we can use the exact variables and the props are same only okay so let me save this one and the next in our effect site I'm just copying this add associate and then I created update so here okay first I am checking the function if it is update associate I am calling this service update function and passing the same data once it is succeeded I am calling this update associate success and in this success scenario I'm providing the text is updated successfully failed to update or associate the failure scenario that's it okay now we have done in our effects side finally we can move on the reducer so in this reducer also here I am just checking if it is update associate success instead of taking this maximum value so let me generate the loop from our existing state if it is matching then I am returning the new data so that means the updated data so otherwise we can use the existing one that's it so let me format this one and this one is not needed we can directly assign this value okay okay this is fine finally we can move on the component set okay so in this component side here I am just checking this object dot ID W equal to 0 then this is the add scenario okay at the same time if it is having the value that means more than zero so then this is the update scenario so here I am going to dispatch this update associate action okay so now let me try once again so instead of the ram Kumar let me provide actor if I click this saved see we got the message and also the text is updated so let me update some other fields also instead of Chennai I am providing Delhi changing this level and the supplier if I'm saved see so all the fields are updated successfully okay so final one is our delete for this delete also I already created the function okay and next thing is we have to create the actions we can follow the same thing what we are used in our update scenario so the first thing is we have to declare the variable update we can use delete and in this action side it is delete associate delete associate success I am changing the variables and the props are one is just a code and the data type is number and in this access scenario also same okay next in our effect side so let me copy this update so the same way I'm creating for the delete okay first I am checking the action if it is delete associate I can call this delete service and here I'm passing the code and once it is succeeded I'm dispatching this delete associate success again I'm passing the same code and the text is deleted successfully failed to delete associate okay and the final one is reducer so in this reducer side first I'm checking the action if it is delete associate success instead of using this Loop what I'm going to do let me use the filter okay if ID so this is the condition and I am adding the same new data that's fine and finally in our component side I am checking on confirmation to you want to remove if yes let me dispatch the action so that is our delete associate okay so now we have completed the functionality we can verify this one if I'm trying to remove this one do you want remote see the record got removed so let me remove this further card also see it is removed and also it is updated in our listing even if I am refreshing also it is completely removed so now we almost completed all the functionality so before closing this video let me provide my final demo so initially whatever data available it is loaded in my listing so by name clicking this pop-up button it is opened if I'm click the save it is not saved because we have a validation so let me provide some values added the phone number whenever I am entering the value the color is changed in a red to blue okay some value and the group 3 supplier so once I'm click to save and I got the message at the same time from checking it is reflected here now I am trying to edit this one so instead of level 3 I am providing level one and it is the customer once I'm saved I got a message and also it is updated here finally I'm trying to remove this record I got a confirmation message do you want to remove one same clicked OK it is remote okay okay now we successfully completed our demo now we are in the end of the video so actually in this ngrx series we are almost done uh still I am not explained to more packages that I will cover in the upcoming videos so still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 4,202

Keywords: angular ngrx for begginers, angular ngrx crud, angular crud with ngrx, ngrx crud actions in angular, angular crud actions with material UI, angular crud with modal popup, angular crud with json server api, angular 16 crud actions, angular 16 crud operations with ngrx, angular crud actions with ngrx, angular 16 with material UI, angular material UI table with pagination and sorting, angular material UI dialog, angular ngrx examples, ngrx for begginers, nihira techiees, angularngrx

Id: wpNV4kJt1S4

Length: 82min 10sec (4930 seconds)

Published: Tue Aug 22 2023