NGRX Blog example | Update blog | passing parameters in NGRX selectors |Angular 16- NGRX Tutorial

this is our angular 16 in grx tutorial so in this video let's talk about how to pass the parameters in selectors okay for the functionality point of view I am going to use the same blog screen example so in my last video I have explained how to create the New Black for the continuation of this video we can complete the update functionality okay now let me start the implementation so let me start from the accents so already we have this add block here I am going to include one more action so let me provide the name is update block okay so here also the parameter is same so we can use the same props okay this is fine next let me move on the component side so in this block component so here only we are populating the list of blog information I'm just adding on due tag then here I'm going to include one button edit okay so let me save this one see now for all the blocks we have the edit section okay so next let me bind the event and here we have to pass this ID so let me copy this one and we have to Define this function here okay our function is ready we can add this ID into our console so when I'm clicking this edit see I am getting this ID so in case if I'm clicking the last one so I got the ID is three okay so next to what I'm going to do so in this edit function I'm going to open the pop-up okay for the ad functionality and the edit both are I'm going to use the same common this add black only hand in this edit scenario we have to pass this ID into our pop-up command and also I'm going to pass two more parameters so let me do some customization in our open power function for transferring the data we have to use this data option here I'm passing one object so first I am going to pass this ID okay so let me get this ID as the parameter so the next property is title title also I am getting us the input and we have one more parameter is cd2k so the default value I'm going to provide us the files so next in this add functionality so I have this ID point of here I'm just passing this 0 this title add block okay so similarly in this edit function we have to pass the exact ID value and this is edit block try to finally this is the edit so we have to pass the values true for this easy edit okay so let me say this one and the next thing whatever value we are transferring from our black component we have to get it from our ad block okay so in this Constructor side I am going to inject matte dialog data okay and also I am going to implement one life cycle hook all in it and here I am going to include one console.log so this dot data so now if I'm clicking this add block so I am getting this ID 0 title is the add plug so similarly if I'm clicking this edit I am getting this edit blog and also I got the exact ID so first we can change this title okay so let me declare two variables page title another next one is get it blog ID and here I am going to check like so this dot data is edit so this dot edit block ID called and also for the page title so let me format this one and in this base title value we can bind it here instead of the hardcode value we are changing this into dynamically okay another next thing is based on this ID we have to fetch the individual blog information and we have to populate in our controls okay in this title and the description So currently we have our datas in our store only even in this black screen also using the selectors we fetched all the list of blog information then we have to populate it in our screen but currently based on the ID only we have to fetch the values okay so what I'm going to do let me create one more selector so in this selector I am going to pass the IDS parameter okay so let me copy everything I am going to provide the name is get blocked by IED okay and since I'm going to pass the parameters so the parameter is blog ID number okay So currently from this state we have this blog list so database blog model so blog dot ID so this block ID so it will return the object so let me save this one next from our component side I'm just declaring one more variable and here we can use server store from the store let me select and our created selector is gets blog by ID is having the parameter so let me pass this edit block ID okay so let me subscribe this one edit data equal to this data so let me format this one here I'm getting this error blog modular and different okay so here let me convert this Center okay the error got resolved so once I am having this value so let me set this value into our forms okay so our form name is blank form so this dot block form dot set value so similarly we can set the values for next to two fields so let me refresh the screen so if I'm clicking this on C the title and the description is loaded so similarly if I'm clicking the next one so the existing data we have populated next let me handle this say functional T part of creating the add new blocks we already implemented the functionality so there I am going to do some modification so let me go to my component let me check on condition is edit okay and else so this is the add scenario we are dispatching this ad block action so similarly for the update we have to dispatch our update block okay so in this both areas we are passing parameter is our blog model okay the only difference is in this add scenario this side is 0 because we are generating ID in our reducer side but in this update scenario we have to pass the exact value okay so in this edit scenario let me set the values for this ID so I can get this ID from our forms okay okay this is fine so the next only thing is bending uh we have to do changes in our reducer side for this update block so let me go to our reducer we can just copy this add block so instead of this add block let me change this into update blog okay and other things are fine this ID generation is not needed and here let me declare one more variable updated blog and the functional demand of you we have to find the exact block and the need to update the new value so what I'm going to do let me generate the for Loop for our existing block list using map option so here underscore block dot ID equal to block that ID if it is matching we have to pass our input data okay so that is underscore block otherwise we have to use the existing value so in this blog list we have to provide our updated blog so let me save this one so I'm going to verify now so I'm just removing this Google if I'm trying to save see it is updated so let me get some content from the online for the angular I'm going to replace the information so it is updated okay so similarly if I am trying to update this react also so I am providing the same value only so instead of the angular I'm just providing a react see it's got updated okay so similarly if I'm trying to update our title also instead of the react I just changed into react.js okay so it is changed there may be The Descent point of view we may need to work otherwise the functional defined of you it is working fine okay so in my next video I am going to complete the functionality of delete so still if you have any doubt set 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: 1,995

Keywords: what is ngrx in angular, why ngrx, why ngrx selctor, 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, how to pass parameters in selectors, props in selectors, is props in selectors derecated, update the current state in ngrx

Id: IblSTryllvA

Length: 13min 39sec (819 seconds)

Published: Mon Jul 10 2023