NGRX Blog example | create new blog and handle object parameter in action |Angular 16- NGRX Tutorial

this is our angular 16 ngrx tutorial in this video I am going to continue this black screen example so in my last video we have populated list of blog information so this video onwards we can create the new record okay this is my blog screen here I just populated the list of blog information next what I'm going to do let me provide an add button once it is clicked I am going to open on pop-up here request to input one is for the title and another one is for the description once we received the input from the user we can dispatch our add blog action okay that is my plan so let's start my implementation first we can focus on this ngrx part 4K so already we have created this action model reduces selectors and state for this plug first let me do some changes from our state side so in this initial blog State I am just returning the array of data okay so instead of that let me change this into object for that let me create one more model class I am going to provide the name is blocks bloglist and here we can use this black model object okay so let me save this one add in our blog State also I am just changing this into blocks and then I'm using this object here we have this blog list and whatever value we already had that I am ascending to into our blog list okay next in our action side already we have this load block after that let me create one more action the name is ADD block okay so this acts and expect the parameter we can use this props option so blog input and the data type is block model and next in our reducer side so in this reducer we can add one more section for the add block so here the action is ADD black it's having the state and also action so this default we can return our state so let me modify this blog list so first whatever value available in this state let me provide here this state DOT bloglist so after that I am going to add our new record okay so new record will be available in this action so let me declare one more variable here okay it should be input I have the change in my action also yeah so next let me include it here that's it so the idea is very simple currently I'm having three objects in our blog list I'm just added this array I additionally I have added our new blog input also okay so let me save this one okay this is fine next let me move on the selected side so in this selected side previously our state is this black model array so now we are this changed into blocks object and in this get plug also let me return only this blog list okay I hope the functional point of it will work yeah it is loading the data so next let me focus on the designing part so as I mentioned I am going to use the pop-up so let me inject this matte dialog model in our material dot model so then only we can use server dialog control in our application angular material and dialog and our model name is matte dialog model so let me save this one next let me create one component I can provide the name is add a block locate our common end is created next in our black screen I'm going to include one button here let me bind The Click event add block okay so next in our TS side I am defining this function barely I'm going to create one more function that is for opening the pop-up so next in our Constructor let me inject this matte dialog from this function we can open our pop-up here we need to pass our component okay I'm going to use this side block component and additionally let me provide the width I am going to provide 40 percentage okay so let me see the output now okay we have this button my name clicked okay it is not opened the reason is I am not called this function here is opened so let me focus on the designing area first time including one form so inside the form I'm going to use this MAT card so already I have imported the Mad Card model just added the header add blocks okay next I am going to include this matte card content here only I'm going to provide our controls the next one is mad card actions here I am going to include two buttons so let me copy it from here so the first one is we can provide the name is save we can remove this click action and the type let me provide submit for this one for closing the pop-up so we can provide the name is close pop-up okay and instead of the button we can use the anchor tag so let me Define this function in our ad block component and let me include the Constructor also so in this Constructor I am going to inject this matte dialog graph reference we have to mention our component add block component so let me save this one and this Dot dialog reference dot Clause okay see the rest once now okay we have the two buttons so by name clicked it is closed this color let me provide ascent next I am going to use this matte form field here we can use this matte label title and next I am including my input control this is for title and I just added one directly also okay similarly let me copy this one I am going to add the description so here instead of this input control we can use that text area next we can use the same directory that's it next let me include two custom classes here see the design now okay so we have this title field and also our description the next thing is we have to handle this form for that I am going to use the reactive forms so the first thing is in our app model we have to import our reactive form model so already I have imported this form model similarly I can import this reactive form model also okay so once it is done let me move on over add plugs component so in this Constructor side let me inject this form Builder next let me Define my form blog from equal to so in this group let me Define my controls so the default value I have provided 0 for this ID so the second field is title and the final one is description okay so the default value is empty only and also we can include the validation using this validators so now our form is ready we can map to our HTML site just in our form I am going to include this form group and we can bind our NG Summit event so let me Define this function save blocks so in this save blocks first let me check so this dot block form valid so then only I am continuing otherwise I have to provide the alert message so once it is valid I can convert this data into blog model ID let me provide zero change this title we can get the values from our block form okay let me save this one next we have to dispatch our action so before that let me inject our store also private store and here we can use this App State model so let me check my Upstate model okay this should be changed into blocks okay now we are good to go so once I'm having this object and also we have injected our store so let me dispatch our action and our eyes name is ADD block okay here I'm just passing this blog input okay we have to follow this format so let me save this one the next important thing is so in our HTML side I just included this form group for this controls we have to include this form control name okay the first one is title and the second one is description so let me save this one and similarly once the save is completed we have to close this pop-up and the next very important thing is this ID okay so currently I'm passing the value is 0. if you are using any APA we can handle it from there So currently we are handling everything from our ngrx side so let me handle in my reducer side so if I'm going to my block reducer so here only we are handling this add block so here what I'm going to do so here this blog dot ID called so I have currently I'm having this date okay from this state I can access this blog list one so we almost done our changes let me verify from the screen So currently no irr when I'm clicking this button I am able to see this pop-up once clicked I am getting this validation message okay so let me provide the titleists angularjs so description this is the initial version so let me save this one see so the popup is closed also the newly added record is added here okay so similarly so title MVC coding pattern so once I'm clicked see the new block is created so automatically it is reflected on our black screen also okay our add block from Salt is completed and the next two videos also I'm going to continue the same examples only so there we can complete the update action and also the delete action okay so before closing this video let me provide the overview what actually we have done so first we have this initial state so initial State storing the list of blog information okay using this selectors we fetch the list of blog list and then we are binded in our UA and the next using this add block button we just opened on pop-up and we have to input one is the title and another one is the description using reactive forms uh we got our data so then we are converting this data into this uh blog model object so that actually we are doing from our component side okay we just converted into this black model object finally we are dispatching this add blog action okay so in this action point of view we just created one action with the name of add Block it's having only one property that is our parameter this blog object model is the input next to from our reducer side through this action we are getting this block input finally I am adding this into our state so since we are subscribed to this state if there is any change happened in this state obviously it should be reflected so that's why once I'm created the record automatically reflected in our screen okay so now we are in the end of the video 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: 2,984

Keywords: what is ngrx in angular, why ngrx, why ngrx selctor, what ngrx store, what is ngrx selectors, nihiratechiees, create ngrx actions, create ngrx selectors, angular material UI dialog, angular 16 reactive forms, how to pass parameter in angular ngrx, how to pass object in ngrx actions, handling post request in ngrx, create new record in angular ngrx, angular ngrx examples

Id: Y1Cf6goWqDM

Length: 17min 1sec (1021 seconds)

Published: Wed Jul 05 2023