Angular 17 CRUD with Local-Storage | angular 17 tutorial

so welcome back to Learning Partner in this video we are going to create a crud application in angular 17 so angular 17 is there everyone in the interviews also it everyone is asking uh like what are the new things we have got in angular 17 correct because the old version whatever we had in before angular 17 it is supported with angular 17 also but some new things are also there so everyone is asking about even though they don't have the project for angular 177 but everyone is inquiring like are you aware about the angular 17 new features and not but if you are preparing and once you clear the theoretical round they are uh now companies are trying to ask uh to do the machine test round in angular 17 also normally Crow application uh now Crow application can be with API if they provide the API you can do the crow application with API or they will ask you to do the crowd operation with local storage also or Json point so these are the various ways but specific to this episode we are going to uh do the crow operation with local storage so I have just tried to find the UI how we should design the UI so if you can see in the background the back image rather than displaying the list in into the normal table format we will use to we will we will try to design this kind of card to show the list of record and here we will have a button on on click of add button we will open the model popup and here we will do the coding here we will have the form of our uh the topic whatever let's say user registration or student regist whatever we decide now so this is the repository angular 17 curent local storage this you can uh refer the code I will be doing I will be pushing into this so now I have to clone So This is My URL now I have to go to my folder so this is the folder I'm using for all my angular project so let's open the CMD command prom I'm opening get clone to clone the URL we have to use this uh command get clone then you need to pass the URL enter So currently I don't have anything folder is empty so it will show like you have appear to clone an empty repository because I don't have anything right now so here you can see folder we have got now inside this folder I have to create a new project so again I will open the command from same thing you can do from the visual store also NG new now I will give the same name whatever the project name so that it will be easy for me to remember so project name I'm giving as angular 17 c local storage let's enter now it will ask you some things like do you need a which CSS framework you need and then do you need a server side rendering or not so let it ask yeah so you can see it is asking you do you need a CSS pwor s l whatever so we are currently going with CSS only then it is asking like do you need a server s reading this is another thing what we have got in angular 17 with with the stable version like we can enable the service and rendering but currently we are not uh going through that so I will say no enter so this will create my basic angular 17 project now installing now it is installing the npm but I will stop this process because in my system I have already created a f uh folder where I have keep my angular 17 no model that I will link to this project so command I have over here to link this I have created another video if you are uh preparing for the interview you might be creating multiple projects so there is no point to keep uh what do we say multiple copies of your node module in each project rather than keep us create a single copy and move that I'm just removing this and putting it into my parent folder now let's delete that now inside this folder I will create the shortcut of my note module so for that I have to open the command prompt with administrative right then I have to go to this particular folder CD angular sorry CD dot dot CD YouTube is my folder then CD angular 17 then CD angular C 17 local storage now inside this this particular folder I have to run my command which will create a shortcut now let's check so here you can see I have got the shortcut if I go into that it is navigating to my node mod then in my node module I have already installed bootstrap and the font some js also now let's open the project in vs code right click new window I'm opening a new folder for the first time so I have just have to select the new window and there you have to open the particular folder which we have just created open folder paste the path so this you have to open so as I said like in bootstrap in node module I have already installed bootstrap and the font or some so but to use them we need to add the CDN link so that also I have it over here this is just a cdan link sorry the local path that we need that we need to add it in the style section like this this is the first thing I have did let's close it now let me just zoom a little bit now so let's consider what we are trying to do is let's try to create a re we are we need a scenario like what type of C operation we are going to do let's say we will register we are going to create a student registration app correct so when we say student registration app what things we need so when you are appearing for the intera they will simply send you either they will provide you the mockup also like what kind of UI are you have to design or they will simply tell you these are the fields so let's say if we are designing if we are creating a student registration app what things we need to take when student is going to be registered so let's say name then contact number email ID we have to ask then is City State address and pin code some basic thing again you can add many more things but for just uh to keep it so very simple I'm just doing this name contact number email city state and the address and the PIN code these are the things we are going to have now components how many components are we are going to need so if we see the UI as we have decided that we will create a component and in that component in the card we will show the data and on click of add button we will open the model purpose obviously only one component is needed either when we create the project we get the app component by default correct so either you can use this component also or you can create another component it's your choice so let's close it uh let's remove whatever we have got now in app component app component only I'm going to do the crowd operation so let me just first run the application to run the application we have the command NG serve now if you have to open the browser by default so you can add hyphen Hy o it will open the browser by default with Local 420 now so if you see the UI so just this part okay so here in instead of composition plan we will add the L add our uh page title like student list so let's try to design that so do row I will be using call six then again I will have call Six in this call six I'm going to have button at the end so that's why end class here I will write H4 and here we will say Student Portal just a meaningful name we are giving then we will have a button over here let's add some class to the button BTN BTN we will use outline class let's say the text will be add new let's just try to save and check if we are getting the proper thing so you can see by default it is opening to the local 40 so here you can see text is is there and just add new add new button is also there before that now let's just add a container so that we will have some space we don't need the whole Space we can use the container so that proper spacing will be around from all the corner so you can see we have got it now let me just add a addding top three fine now if we see the UI first I add new button is also there so here first we need to design the card first we will create some basic UI then we will start the code so after that row call let's say in First Column we uh in one row we are going to show the four cards means for record will be there then we have to use the card now if we observe the UI we need uh the in we will create a card Eder here we will show the student list here we won't have anything but this basic detail we will show it and at the end we will in the footer we will show something so let's just try to design the same so card header and in card header we will show student name so let's say name this is just a static right after card header we will need the card body so card pyph body now in card body like these are the things we are we are going to discuss uh show uh name so name we can show it over here and contact number we can show at the end you here you can see we have some logo instead of the logo we can show the contact number so in card header again we can create row column structure call Six in first call six we will show the student name and in remaining call six we will show the mobile number but it will be at the end so text hyphen end class so our card header work is done after that in card body so in card body what we can do is uh in simply a paragraph We can show some information let's say paragraph what we can display like uh email we can displace so here email then again one paragraph city state in code in one paragraph and in the last we will show address so this is card body and in the card footer let's see what we can display in the card footer what is remaining nothing so instead of putting email over here we will display the card putter over here but it will be text Center so text Center let's save and let's check if we are getting some proper UI yeah so near about something we have got obviously we we won't be able to match the same thing but we tried uh let's remove this card header color we we need it to be white but before this card should be properly visible we need the background page of some another page of some another color so let's try to pick the same color from here I'm just trying to pick this this color color now I'm just trying to pick the color this color I'm trying to pick this is the color so to my whole page I will add this color so or let just add over here with to the body background color Ash value let's just save and check if we have some background color now yes I think we have background color now yes so you can see we have got the background color now let's try to remove this header color we don't need that header to be gray so card header background color let's make it white only background color hash FF FF so this is just a hash code for the background color let's see oh we need to add important also so that it will apply now it is looking properly correct now so here we are going to do this is just a a static UI now on click of add new we have to open the model popup so obviously I said like bootstrap is already installed so let's go to bootstrap site let's get the code of the footstep model bs5 model so this is just the model so let's copy let's paste the UI at the end so model Pap we have got let's remove the necessary things now as per UI as for the image we are trying to do so here we can have a label also so let's add the label so label will be create new student just a label now this model we have to open on this button click so now to open the model on the button click either we can write for or directly we can use this also by adding hash this datab BS model and the data property we can do the open open the model but I will write the code to open the model popup so what I need to do is Click event I will write open model let's create this function whenever we are appearing for the interview we are trying to showcase our skill right so don't uh never try to directly use whatever things we have got by default things try to write the code so that they can analyze you like yes you can write the code now either we can use uh uh we just have to read the document we just have to get that particular Dom element and we just have to add a dynamic style to open the model prop so I will just explain that first model document dog element by ID the model ID let's get the model ID so our model ID is my model let's copy let's paste it over here so here we will get the reference of that particular du now we just need to add a null check like if we have got it or not not equal to null now if we have got it then model Dot style dot uh the CSS is like display is equal to block so now let's save and check if we have on button CLI we are able to open the model purpose so if I click you can see we are able to open the model popup correct so this is one way to open the model popup another way as angular says never use the directly uh Dom apis to interact with the Dom so instead of this we have got viewchild also viewchild is just another way to get the reference of that particular Dom element so let's try that let's remove this variable we don't need it so first thing like we have to create the view CH so let's write view child so once I select you can see it is automatically added over here view child then round bracket in single code we have to provide the element ID so this is my element ID we will provide it over here here then now my vew name so model colon data type we have to pass data type will be element rep because we are in this bch we are going to store the element reference that's why element rev it will say like it is not initialized I got it let's try to what it suggesting I undefine okay so let it be so this is how we have created The View check so viewchild is a way by which we can get the reference of a Dom element or a component instance also so whatever the name we have added over here this name will be added to the HTML as a hash property value just like this then you will get a reference of this element correct now so uh the first way I have shown you by by using document. get element by now on click of close so this close I will show the other way by using view CH so click close model round bracket now in this function we will close this model popup by using the view CH so you will get to know like what are the various Ways by which we can do it now this do model dot native element Dot so this is equivalent to this then style do display none value we have to add but now it will say like it can be null or uh means the view child can be uh what do I say it can be null so we just have to add an additional check just like that here also we can say we have added a n check so just like that if model is not equal to null just an additional check we have to add and then here we can do like this and now we don't need the P so yeah this is how we do it let's just test if we are able to close the model popup so add new on click of close you can see we are able to do that got it so this is how you should Target when you are appearing for a machine test what are the new things what you know that this is a way how you showcase your skill what things you know so use try to use the view child in this kind of scenario correct now now this same function we have to call on the bottom button also where we have the close so here also same thing now as we have discussed like these are the various properties we are going to have correct now either uh we have we can create class or interface to strongly type our model so here I'm just going to create an class export student sorry export class student then what are the properties we have discuss that properties we will create name poon string mobile number Po and string email on string then City State pin code and address so City to and [Music] string State data type again string ring and address correct so now if you see all the properties are giving error like it has no initializer it has no so this is a class so every class has a Constructor either you can add a not over here so you can see error is gone mean means we are saying this like this is an optional but that is not a good way so always whenever you are creating a class create a Constructor and this in this Constructor just initialize all the properties so all the properties are having the data type string so I'm initializing with empty this is the right way is expected from you so you can see whatever the properties I'm giving mobile number spelling mistake is there this dot mobile number is equal to Mt this dot what else is remaining name State this Dot and pin code got it so our class is created always try to create the class then in the Constructor just initialize whatever the default value you need to give it now we need to create a model object over here so that will be student obj now data type we will give instead of any normal you might have you might have given any or correct so instead of any now we have to use this student object and we need to initialize it is a class so we can initialize that correct now so we have created basic UI we have created the model also like what are the properties we are going to have and we have created object also next thing we have to design the form in the model popup so let's design the basic form row do call let's say 66 we will have a label over here inside label let's say what else we can have like name what are the things we have after label I will have a text box I will add class form control iphon smm class placeholder name so now this I will just copy paste and complete my UI name then mobile number I will just copy this whole row then we have email either this name will be name will have a long screen means full screen and then we will have mobile number over here instead of this call six we will have let's say call it just for the name then mobile number and the email then we have city state so instead of call six we will create call Four call Four City State and pin code so whenever you are designing the form also now I know we are not UI developer but forms on the inside of liation forms table these things only we have to design in some companies we have the specific UI developer they will help if it is very complex or something but the basic thing we have to do so just understand like how do we design the basic form whenever you are appearing for the interview so your form should be proper it should not look like it is created by some freser or he he don't know HTML even though like we are angular developer still we are a u developer so we need to Des design the form also properly the last thing we will have address now for address we should use text area most of the people will directly create the text box but that doesn't look good address will have multiple lines of cod so always go with the text area rows let's say three rows I needed class form control SM correct so UI is completed and in the uh in the footer we will have one more button to save employee sorry save student instead of Danger let's add a success or primary let's say when check if UI is coming proper on click of add M so form control SM is the class not present let's replace that with form control let's save yes so now UI is coming properly it just add a now so name and the address address Also let's make it full screen like this now form is completed we have created the object also now this object we have to bind to our form by using NG model so now if you remember with the angular version if you have to use the NG model we had to add the forms module in angular 17 but now here we don't have appap module correct so in component only you got the import section so here you need to add forms module let's just not add that and let's try to add it use it NG model we will get the error that I'll showcase NG model so here only you can see we have got the error like uh cannot buy NG model because we have to add the forms moduel so here let's add the forms module now the error is gone got it now so this is my object so student object dot here now you can see the advantage of creating interface or class you can see it is intelling what are the properties we have so we don't make the spelling mistake and anything correct so this is the advantage so now let's Copy mobile this is just the repetitive thing we just have to change the properties image city state for city and state either you can create a static dropdown also or normal text box is also fine if it is specifically mentioned like create a drop down just do create a drop down but just to keep the video length minimum I'm just going with the normal text box and this will be address got it now so we have created the form we have binded our object with the particular Fields also next thing on click of save we need to store the data into local storage so save student let's create this function now so whenever whenever we are dealing with the local storage now we need to be sure to check like if data is already there or not because if you directly save the data the old data might get uh removed and the new data will be saved so whenever you are saving whenever you are appearing for the interview or whenever you are doing the crow operation in the with the local storage so make sure first you read the local storage if we have the data then you just need to read that and push new element in into that data and then save the updated one but if you don't have you can directly create a new array and save it so let's do that so constant is local present so here we are going to check if in local storage we have the data or not so gate item is the method to read the item so the key name will be angular 17 crud this is the key name I will be using now so if in the locost we have the key with this name we will get uh something but if it is not there we will get is null so if it is not null first check then else if it is null means we uh this is the first time we are entering the data into the local storage so this else block will be added so here what I will do constant new ARR is equal to empt array I'm creating now to this mty array what I will do array do push and I have to push sorry yeah we can create constant this object student object then we have to store the data local storage do set item and this new array we will store it over here sorry key I have missed so set item needs two parameter key and the value so first one is the key and second is the value but whenever you can see we are getting the error so when we are storing the data into the local storage make sure local storage only understand the string type of data it doesn't understand what is object or array so while storing the data we need to convert the array into string format so just on. stringify method we can use to convert new array over here now this is what we are doing to store the data into local storage if this s blog is going to execute when we this is the first time we are going to enter but the first block if we have the data already in the local storage so what we need to do again same thing so constant now you can see while storing the data we are we are converting the data into the string but now here if we have the data in this variable we will get the data so now the string data we have to again convert it back to the array format so old array variable I'm creating Json do par method we have to use so json. stringify method is used to convert the object or array into string format to convert it back to the object or array format we have to use json. par and here we need to pass the local data present variable because in this variable we will get the data from this key correct now old array we have got now same thing old array do push and we have to pass this object and then we will store the data so now this line will go over here here this will be old array got it so this is how we have done the save logic let's add a debugger and let's properly debug whenever you are writing the code for the first time make sure you write the debugger over here or you add the debugger in the console but make sure you are properly debugging the whole code for the first time now on click off add yeah we don't have any error let's try so if you see in the application let me just remove everything so currently we don't have anything anything in the local storage so we go to the application and then local storage we get the local storage now let's try search in let's add mobile number let's add a email ID also City State pin code some address now on click of save that function we are calling so if I click you can see our function is get called now if you see the uh this do student object now you will get all the properties whatever we have filled in the form see got it now we are trying to check the first line we are trying to read the data from the local storage with this key So currently we don't have anything so if you can see over here what we have got null so if it is not null so it will go to the El block so in El block we have created empty array in empty array we have pushed the object so here you can see in Array we have got one element and now this we are trying to save to the local storage continue now if you go to the application now here you can see we have got stored the data correct now let's reload and let's try another time now in the local storage we have the data of Sachin now let's try to add Rahul Rahul add [Music] gmail.com let's say Pune again Maharashtra let's add some Dom address let's enter proper address so that application will look proper now if I click on Save now you can see now we will try to read the data from the local storage now we have the data so this variable is not null so now our if condition will Lear now we are trying so if you see over here whatever the data we have stored that was in the string format so you can see it is enclosed in the double code it is a it is an array array of object but it is enclosed in the double code whatever there it is in the double code it will be string correct so now we have to convert it back to the array format so we are using json. far method so now in Old array you can see we have got properly array now to this array we are pushing the new object so now in Old array you can see we have got two record something is wrong so here you can see student then we have got it why it is like this the whole object it has moved this should not be the case why it has added student over here and inside that it's is student object so here you can see it has pushed the element but it has added property and inside that it will add let's just try how it is looking okay so here we are getting it properly correct so you can see this is the first element and the second element this is for Rahul and this is for Sim okay so record is inserting properly correct so our save method is done but now on refresh or on the page load we need to read the local store data and that much card should be plotted correct we have saved the data but on the page load we need to read the data also and that uh whatever the records we have that we need to display in the card so on the page load so on the page load we need to write the code so we can you make use of the NG on init life cycle hook so that will we have to add it our on init and then we have to implement also so Implement on in it once you do it now it will ask you to create NG on and it hook now so once the page load we need to read the local storage data and that we will store it in a variable so let's create a variable student list colon now data type will be again of the data type student it will be array let's initialize with empty now on the page load we need to read the data so constant local data is equal to local storage dot g item the key name is whatever we have used while saving angular 17 correct this only we have to pass it over here correct again we need to add the if check like if we don't have the local storage obviously we cannot do the operation first whenever try whenever you are reading the local storage data make sure you add the null check local data not equal to null then we need to parse the data so this Dot where we need to store student list Json sorry Json do pass method we have to use and to pass what we have to pass local data now in the on the page load NG on it will call we are reading the local storage data converting it back to the array and we are storing into the student list now this student list we can use on the card now we are talking about angular 17 so with the previous version we know like to iterate the element we have NG for but with angular 17 you can nor you can use the standard for Loop what we know so this is the card and call three we have to iterate so at the rate for Loop we have and here this we can use so instead of item we need to pass our array and this whole column we need to move inside this so this is the standard for Loop what we know now you don't need to depend on the NG for direct to because now the difference is why we have to use this to use the NG for let me just show you why we have to use it if we have to use the ng4 now star ng4 you need to import one thing what common model because ng4 ng4 is a directive it will come from the common model so here you need to import the common model but you are unnecessary uh overhead your component you just need to iterate the elements why you have to use the ng4 you can do the same thing by using ng4 uh for Loop also so you are reducing one input so that's why these are the new things we have got in angular so don't overhead your component whatever the required things you need to import that only do correct so if you just need to iterate the element why you have to go for the ng4 you need to add the input use the normal for Loop now correct now here so instead of student name we have to use the interpolation item Dot name we have to show it over here then mobile number item dot mobile number we have to show it over here city city then State and the PIN code and in the last we have to show the address and the email correct so let's just save now our card should be dynamic here you can see in the local storage we just had two record so that two record is visible correct now once I click on the add Now new record won't be visible because on click of add now here we are showing the list we have in the student list so once we click on the add also now so this function what we have to do at the end so whatever the object we have now that we need to push so here this we just need to replace the old data so this do student list sorry is equal to Old array because here we have pushed the new record old array we are passing it over here and same thing over here also if we on the first load so now if we save on the if we save the new record will also be visible so add new let's try RIT let's add a Dom mobile number toy.com let's say City un MH let's add some dummy mobile number address now once we save our code save save logic will run and the new record is also visible see at the back we have the record new record visible but once we save this model popup is not hiding correct so see new record is visible on click of save one one more thing we have to do we just need to call this function because we need to close the model popup now so this function you can call it once you are done with save so this will close your model popup let's try now on click off add from now I'm adding just the D data on click of save you can see record got added and the model popup is also got Clos but now do observe one thing if I again click on add new you get the same data visible I hope close the model pup I am done with saving also but if I if I try to add new record see same data I am get that is because we have not cleared the model correct this object we have not initialized again so whenever you are opening a new model make sure you initialize it again so student object is equal to new our object that is student so this way you are calling the Constructor of this class so all the properties will be initialized now let's just try so let's say I'm adding some data [Music] let's see it is getting removed we have tried entering some data if I close it and add new so at every time whenever you click on the add new that object is getting reinitialized so you will get the proper form got it so two things we have done C operation we have done and the showing the list also done then next thing is edit and the update and the delete so let's try the update one now here at the footer we will have the we will add the update button so let's go over here in the footer let's add again row column structure call six first in call six we will add the the uh sorry email and then in the call six we will have the button button plus BTN BTN SM BTN primary edit okay so here you can see in each row we have got the button let's remove this paragraph it is coming in the next line we don't need four over here let's make it two or 4 8 e 9 now U is proper now on click of edit we need to open the model popup with this code whatever the data let's say if I click on roit model popup should open with the RO data correct so let's write the code for that so on click we need to pass the hold object on edit correct and you need to pass the item the for Loop instance this you need to pass it to this function let's create this function now to this function we have one parameter on edit and we get the data also so item data type we can pass the students student type of data only we are getting and whatever the data we get that we need to store in the student object so student object is equal to item and once we store the current record into the student object we need to open the model popup so this function we will call it so this do open model let's try this much now if we are able to open the particular record so if we click on edit on roles no we are not getting let's try let's see why we are not getting let's add a debugger edit we are getting the object that object we are assigning to the student object okay I will explain you now one thing what we have done on click of edit we are opening the model popup and in open model popup what we have did we have initialized the object so now this code this will break our Cod so now instead of doing this over here we will close it we will do that initialization in the close model popup so now our code won't break so if we click on edit you can see the record is visible let's click on close if we click on RAM see wherever we are clicking that record is visible over here now we need to write the update logic so how do we write the update logic so update is kind of tricky when we are working with the local storage because we don't have any unique thing correct so what we can do whenever we are inserting the data into the local storage now make sure you add something unique to it like student ID customer ID whatever your form is so for now I will just delete the record whatever I have or let's just edit it there only it will be hard to edit over here let it be so one more property I'm I'm just going to add that is ID poon number because to edit I need something unique because I cannot compare with the name because name can be duplicate right so I need something unique in case of real API you will have primary key correct so that kind of thing so here this do ID is equal to initializing with zero now whenever I'm creating new record now I just need to get the length of the record I have currently and one + one I will be adding so this is the logic where we are adding new record so here so this dot student object do ID is equal to sorry this we will do it over here whatever the current record we have we need plus one so old array old array here we have got the length so do length + one so every time new ID will be there and if it is the first record if if we are uh inserting for the first time we will initialize with one correct so let's say first time we are adding the student ID one next St we have length as one plus one so every time unique ID will be there let's remove the local storage and do the whole thing again so that we will have proper data available let's clear it now you can see on the page load now one more thing so you can see on the page load we are not able to see currently we don't have any data this also we can add this also we can uh just add a check that if we don't have any record in the currently in the local storage we can show something like no record found correct so for that we can use star let's say instead of star and G we have something let me just find that so this row should be rendered if we have some records over here otherwise we need to display something like no record founded correct so for that instead of using ngf again for if you have to use the ngf you need to add the common model into your app. component.ts but but we are working with angular 17 so we should use at the rate NG if at the rate if so here I'm adding at thetive now condition what will be condition we can just check the length so student list. length not equal to zero if it is not equal to zero we will render this de if you are work if you if you know react you might find the syntax very similar in the react also we have similar syntax then else to this and here again I will create a row do call 12 inside that I will just add some padding and here I will have a paragraph text Center I will add no record found create new record let's just save and it let's see see currently I don't have any record so you can see no record found is there correct so now instead of directly using that ngf you can make use of adate if so you don't need to import anything so you are making your component lightweight so when you are appearing for the machine test do use and for at theate 4 and atate so that inter will know like yes you are updated correct now what we were doing yeah so we need to test this code now if I click on add new [Music] searchin now let's try to debug so now we don't have any record in the local storage currently this is the first time so if it will go to the El block of our s student correct so here we have added the array now student ID we are initializing with the Z uh one because this is the first record correct so in over here you get the ID one now let's try again Rahul Mumbai MH some address now it will go to the E block because we currently have the data present in the local storage so now here you can see we are what id we are trying to make it Dynamic so old array dot length currently we have one 1 + 1 so two so here you can see student ID we have got two so every time we are adding the new record we will get unique ID present in our every object now when we click on the edit we know which record we are editing because we have something unique so now now once we click on edit also now you can see save student button is visible if we are in the edit mode we should show update button so for that also we can write the code so again we will use at the at theate if only so now in student object in case of edit we have the student ID present correct so we will again just write at theate if now if does student condition will be if student object. ID equal to equal to zero means this is insert mode create mode so we will show the save student button else if it is not zero then we will have some ID over here so then we will have instead of success instead of primary we will use another color and this will be update student update we need to create this function just like save we will have another update let's just save and check if this hide and show is working properly or not so in Click of add new you can see we are getting save student button let's TR click on edit now you can see update student is button visible correct so this hide and show is working fine now on click of update what we need to do we need to because we are not working with the AP we are storing the data into the local store so what you can do either you can replace 111 property from that particular array to that particular object or let's try that first so first what I need to do first I need to read the uh current record from whatever the record I'm uh inserting from my array so current record is equal to this do student list do find I have to find the particular record because I had added some unique ID right so m. ID I have to match it with this dot student object do ID that's why I had to add one unique ID to the object correct so now here we can just add an additional check like if current record is not undefined whenever you are writing the code with find now make sure you are adding an additional check of undefined not undefined then only you can use it correct now here you can what you can do either current record. name is equal to this do student object. name like this you can uh you can change one one by one property current record dot address is equal to this dot student object do address so like this you can keep on going add all the properties sorry current address dot mobile number I'm just adding two or three properties but you can write the whole thing now this in this array we are going to change the current whatever the record we are updating that we have change in this array now this array again we have to save again we have to push to the local storage so let's copy that line Locos this line only and we will pass student list over here now we have done the modification into the array now that array we are again saving it back to the local storage correct so let's save and check so let's try to edit this and let's try to provide the mobile number with 88 let's click on update but we have not closed the model popup let's reload again so now you can see updated record is there so once we do the update again we need to close the model popup also so this function we can call it over over here so this is how you do the update in case of logos St now only one thing is remaining that is delete so let's add a delete button also then we are done with our application I know this video is too long but I had to explain new things also so that's why might have been a little bit longer t e l t e delete this will be delete instead of primary let's add a danger color now let's say one four let's create this [Music] function just like that we are going to get the parameter let's see if U is proper I thought it let's make this in a small tag so that it will have a less space instead of save let's make it [Music] six 7 5 let's see still we are not getting it okay let it be UI is not what we are targeting okay so now on click of edit we are passing the object which we have to Ren so here on click of delete you might have seen we get the popup like do you need to remove the record or not so that we can achieve by using comound box is delete we can use the comound box and here you can pass the me are you sure want to delete like this and if on click of confirm you get in confirm box you get okay and the cancel if user clicks on okay you get true and if user clicks on cancel you get false so we just need to check that so if this delete is having true we will delete our code otherwise we won't do anything now again to delete this is the same line we will use So currently what we are trying to do we will delete the data from the array and then we will store that array again into the local storage the new array with the deleted record now we need to find the index to delete the record we have to use f index method and this F index method we can use with the splice method of the array dot splice and we need to pass the index and how many record only one record so this will remove the record again we need to store the updated record so this will go over here let's test it so now if we click on delete we get this PO if I click on cancel nothing will happen if we click on delete you can see that record got deleted correct so this is how we have completed our angular 17 local storage cud with some local uh some new things whatever we have got in the angular 17 at the r for loop at the r uh if statement then you got to know like where you need to add the Imports like this correct so I hope this video was helpful to you if you are preparing for the interview make sure you are making aware uh yourself with the new things in angular 17 so that you your question won't get empty correct so that's it with this video please do like and subscribe

Channel: LEARNING PARTNER

Views: 6,320

Keywords: angular 17 crud, angular 17 crud localstorage, angular 17 crud with local storage, angular 17, angular crud, angular crud with local storage, local storage crud with angular, model popup in angular 17, crud with localstorage, angular crud from scratch, angular 17 tutorial, angular 17 project, angular 17 tutorial for beginners, angular 17 full course, angular 17 new features, angular 17 routing, angular, angular tutorial, angular tutorial for beginners, angular project, crud

Id: VVHj6WjcWrA

Length: 60min 30sec (3630 seconds)

Published: Mon Mar 18 2024