NGRX Blog example | Delete blog | Angular 16- NGRX Tutorial

Hello friends welcome to my channel here at the keys and this is our Anglo 16 ngrx tutorial so in this video I am going to implement the delete functionality in our black screen example okay now let me go to my application first in our blog component so already we have this edit button so after that let me include one more button so that is for delete okay and in this click event let me provide remove blog okay and also I need to Define this function and this function also having this ID parameter so let me save this one and we can see the current output okay we have this delete button okay include one custom CSS see now it's somewhat fine okay and next let me move on the action so in this action file let me create one more new action for the delete virtuality so let me provide the name as delete block okay and it is having one parameter that is our ID so data type is numeric so let me save this one next let me move on our component side so in this remove function I am going to use normal JavaScript confirmation so once it is confirmed we can dispatch our delete action okay it's having one input that is our ID okay now we have completed our changes in the component side so finally let me move on the reducer side so we can create one more new section and instead of this update block let me provide delete block so that is our action and we can remove this line it's not needed and here in this update plug instead of the map we can use the filter option here I am just applying on condition the return data.id not equal to action.id okay here I am just applying filter for our existing block list that is not equal to our current action ID okay that's it finally I'm getting this updated list that I am going to assign in our current state okay that's it so let me save this one so functionality point of view we have done so instead of this text we can use the icons also that's somewhat better the looking point of view so let me remove this one instead of that I am using this matte icon okay and this font icon equal to the first one is C edit see it's fine so similarly for the delete also we can use the icon instead of the edit let me provide delete so now if I'm clicking this delete button I am getting this pop-up once I'm clicked OK see the particular card got removed now if I'm trying to remove this dotnet so Alarcon so now if I'm trying to add one more new record okay the new record is added now if I'm trying to edit this one just got updated finally if I'm trying to remove this one the record got removed also if I'm refreshing the screen I will get these three records the reason is these uh three records are assigned in our initial state so that's what in the page refresh time it's coming 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 so in my next video onwards we can start the effects okay thank you thanks for watching

Channel: Nihira Techiees

Views: 1,489

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, delete records in ngrx

Id: rFbZg6mpYHQ

Length: 5min 37sec (337 seconds)

Published: Wed Jul 12 2023