Employee Crud with API Angular | Single to Multiple | Angular Crud

welcome back to learning Partners so in this scenario again we are going to see one very normal and uh daily use code again it's a logical scenario so if you can see the form it's an employee form where employee detail is single you can say employee data is a single but his family relatives details are going to be multiple right so this is kind of a form we normally come across where we have a single information and for that information we have to insert some multiple information also right so this is the best way to handle that I have created one API also so if I show you the object so if you can see this is an object inside that we have this single properties and inside this single property in mock employee relatives I have to send the array of relatives right so you can see this is an array so this should be your UI right on click of add you will be adding multiple multiple relatives into this table and click of delete you will be removing and on click of save you need to send employee object plus his relative details also so let's get started with the angular side so this is the component I have created and this is its dot TS let me just copy paste the HTML code so face go to my HTML let's save logical employee so you can see same UI we can get it let me just close this right now what is we have this object right so we just need to copy this and we have to create the exact same replica of this object so employee object equal to sorry colon any equal to our object right so let me just make the first letter small Let It Be capital right now I need to create one more object of this relative so I will remove this this is employee object which is having employee relative as an array then we need another object that is employee relative object colon any equal to our object so we have to create two object first is the employee object with the basic details and they can second is the employee relative object now we need to bind this to our form this is an existing project so everything like NJ model and everything I have already in app model we have to in import that forms model to use the NJ model that is already done so round bracket NG model equal to double quotes then employee object dot right so let me just copy paste this right so you can see I have added all NG model to all our control so employee object.name contact number email like that up to designation because we have the single information inside the left side okay let me just now so first part is done means the left side part is done so this left form means employee basic detail we have binded the NG model of this particular form that is employee object right now we need to bind this to our second form that is the relative form so here relative will be over here then the properties name relation and age IDs we don't bind right because that is the API purpose only let's say eventually so you can see the details are coming correctly now let's empty the object this will be empty empty let's save right so we have created object two object first is the employee and second is the relative then we have binded that using NG model to over all form element next thing is we need to use the for Loop right so employee object let it let me create a array you can see over here we need to show the employee list also a family relative list also so for that I am going to create one variable that is relay to list colon any r a equal to empty and this variable I will be using on the table to show my relative list Source on a TR we have to use NG Power Star in G4 equal to let relative of relative list then instead of static data we need to just bind it with the interpolation relative dot let me just copy paste now the values will be name relation and age name relation and age right so no need of this static data let me remove that now what we have done till now we have created two object and one array to hold the relative list now so first thing is like on click of this ad means let me save it on click of this ad we need to add whatever the detail user field over here into that array so let's write the code for that click event add relative from bracket all right let's create this function right so here what we need to do we need to push element our relative object to this array that is employee relative relative list Dot shifter uh let's install a push we will use unshift so that record will be added to the top this dot like this let's try to save and check so let's say Sachin let's say relation will be brother age will be 45 and let's see some error is there no error is there let's try one more time yes right so file was not same so you can see I have added the record but one thing you can see I have added it but if I'm trying to adding again it is getting changed because so it is holding the link so we need to detach that link for that we just need to create over here a constant because this array is getting binded with this object so whenever we are changing now that particular property is getting changed to that all the array elements also let me show you that also see if I'm changing over here everywhere it is changing because that object and that array field names are getting linked so what whenever we are making changes that is also getting changed so for that we just need to make a small change so or B J is equal to Spring object so we just need to convert it to the string format Json Dot stringify we have to pass this over here so here what we have done we have converted the object into string format now that link will be detached then again we need to convert it back to the object so B J is equal to Json dot parse and we need to pass the stringified object that is Str object and then this object we will be passing to push on shift so let's see now Sachin a brother age 45 you add right if I change now okay so you can say it is not reflecting now and so you can see two record but one more thing we can do on click of add we should empty this form right so empty this form means we just have to empty the object so let me just copy this like this right so let's save and check it now searching another modify on click of add you can see form is also getting empty right so first part is done on click of add we have added the relative to array then we need to make the API call because on click of save imply we need to use we need to pass this and we need to hit this API so this is let me just write out execute I just need the URL so this is going to be my URL so let's create a function so first before this we need to create instance of HTTP client because we are going to make the API call so we need the instance of HTTP so private HTTP colon HTTP client then after add relative let's create save employee function now here we need to write this dot HTTP dot post method because we are going to insert the data right and the object we need to send for this particular API is the whole object means employee detail also and the relatives also so that is nothing but this employee object because in this employee object we have employee tools and relative array so this we need to pass over here so this dot employee object let's select the Subscribe call on any right now we need to call this function on this button click that is save on the same employee we are going to call this function so let me say let's check it now what happens let's enter contact number file City state code and designation okay so now if I click on Save employee let's open the particular component over here let's add the debugger to that function now if I click on Save employee in the employee object C all the detail came but employee mock relative is empty but in the table we can see two relatives we have added so that is in different array that is employee relatively small so when we say una we just have to add that array into employee object dot this property mock employee relatives is equal to the relative relative array is in this particular variable that is relative list so we just need to do this right so after that we are getting we will be getting the object let me show you what object we get so this kind of object here so we can add a check of result if res dot result is true then we can show alert box like employee created successfully message is also coming from backends res Dot message and we'll use right so let's save and check it now let's enter the detail designation senior software searching brother 23 mother let's add two relatives only right now if I click on Save employee just pay attention now in employee object we get all the detail oh we have made the mistake it should be employee object but we have used we have to do it again in employee object dot property we need to push not relative again we have to fill the form so let me just fill it so I have fill the form so now if we click on the save employee so you can see employee detail is there and we have added three relatives so if I click on Save employee just pay attention on the object in employee object currently we don't have any relative whatever relative is in this variable right so if I continue now if you see the employee object this is employee single detail and in employee relatives we have got 3M relatives right so let me add the debugger continue so in result dot we have got true and message also employee created successfully that we are showing in the alert box right so employee creation is done another thing is we need to show the list also of employee so let's create one more function that is load get all employees this dot HTTP dot get URL let's see what URL we have get all employees write out execute this is going to be my URL this we need to pass it over here since this is gate employee gate method so we just need one parameter result right so we will be making this API call let me call this function in the Constructor ideally we don't call it in the Constructor we use the engine but since I have not created okay now we need to we need one more variable where we are going to store the employee list so employee list colon any it is going to be array right so employee list will go over here this dot employee list is equal to Res dot data in data we get the actual list so if you can see in data we have got the actual list so you can see two employees are there so let me save and let's check the network call if APA call is over there or not on reload yes so you can see employee call is there in response we have got two employee details now we just need to show that in the table so let me just create one more row dot call 12. table right let me just design the basic table right so basic table I have created so these are the headings I will have now we just need to design the tea body empty body TR will be there inside that we have seven heading so we just need the seven columns right so before that let me just write the for Loops star in G4 equal to let EMP off our variable where we have the employees so that is employee list it will go over here and we need we need we are going to show the serial number so again we need one more variable index is equal to index so this index will be will be over here by default index will start from 0 so we have to use the plus one then we need TD and here again interpolation EMP dot let me just copy paste this basic code then name contact number email City state designation let's see the swelling so let's save and check it now but that is not visible okay on the bottom it is visible but what we need we can create one more variable to show and hide is new div whole and Boolean by default I will make it false and with this variable I will be using original star NG if and vice versa of this with the false so not we have to add let me add one more button BT and btns Sam now on click of add we just need to change that flag so we can use it over here only not equal to not of this so let me save and let's check right so on click of add you can see on click of AD we are getting the form table or the list right so we have shown the whatever the record we have inserted two records are there in the table so that you can see now we just need to edit it so we just need to add one more button into the table so one more button will be over here button Plus ptn windows will be edit so on click operated we need to one more API call will be there to get the record of employee and its family detail also so get employee and we need to pass the ID that is a and b Dot EMP ID we need to create this function upper gate employee we will create it so from front end we are sending ID right so we need to catch that so it will be EMP ID again we need to make the API call so this dot http dot gate so let's check the API to get the employee data so after this we have this APN write out one C so this is going to be API where we have to pass the employee ID and it will get all the details in double quote we need to pass it now this instead of one it will be dynamic so plus whatever the ID we get from the parameter we need to pass it let's just give the data type to this and again subscribe call will be there dot subscribe this is right so let me just add a debugger and show you how what kind of data we get info inspect so if I click on ramkumar edit you can see API call is there and in result data you can see we have got the employee detail and it's relative also if you remember we added two three relatives we have got the data now we need to store it properly to our employer so this employee object will have it will go to this dot employee object is equal to Res capital r e s let's save and check and one more thing on click of uh edit we just need to change that view also right we need to show the form so for that this Dot is equal to true so that form will be visible so on click of edit okay let's see what went wrong on click if I did okay so we added result it should be result.data because actual data in data property now it will work fine on click of edit we have got the data into the employee object and you can see that data is getting populated but we cannot see the relative why because in the HTML in the form we have used another variable that is relative list so whatever the data we have got whatever the relative data we have got we need to show that in employee relative list is equal to this dot employee list Dot this mock relative array so let's save and check now all detail will be visible on click of edit right so in employee employee object we have got everything now that out of that relative list we have assigned over here so if I continue you can see the same detail we have got right so whatever the form we had stored employee detail and it's relative that same detail we can see it over here now on click of update we just need to hit another API so that is update employee so if you can see this is just same like at as it is just like same just the URL will be changed right so now if employee object dot employee is 0 then we will show the add button oh sorry save button otherwise we need to show the update button right so for that I will just use the ngif so employee object Google object.emp ID equal to equal to zero let's say when it is equal to 0 means it is we are creating new employee but if employer is not equal to 0 because in when we edit we got some ID over here so in that case it will be update and it will be update employee let's create this function Dr save right so here again same thing you just need to copy this paste it over here instead of create employee now it will be update employee remaining same is the theme same code you can see same code is there just the URL change will be there right and after this we can call our gate employee method also and this Dot same this function will also be called when we save so that updated list will be visible in the table and we just need to make it false false in the same code over here so let's test it now so see if I click on ADD you can see save employee button usable right but if I click on edit we can see update employee because now we have the employee ID let's add one more employ one more relative Rahul let's say he is his second brother age will be 26 on click of add right let's click on let's check the network call on click of update employee updated successfully message we have gone update employee payload see we have sent four records okay now if I open this you can see four records are visible over here right so this is the way you should handle this kind of scenario is it just a uh scenario where I have I have considered employee and it's relative but in your case it can be anything product it's variant then uh what designation it's senior employees anything where you have a single single entity and related multiple entities are going to be there so this is the way how you should handle that scenario the logic is just to you have to create the two separate object first is the single entity object and second object is the multiple right so this is the whole code and to detach the linking we just had done this parsing thing rather than it is just basically API call and in the gate employee we just need to store that multiple data into particular array where we have used the formula right so hope you have you must have found this example very interesting please do like and subscribe and please share my videos

Channel: LEARNING PARTNER

Views: 8,085

Keywords: crud in angular, employee crud in angular, angular crud, angular crud operation, crud operation in angular, employee registration app in angular, employee registration in angular, api integration angular, angular api crud, crud with api angular, todo app angular, angular todo app, angular mini project, angular project, dot net api angular, angular with dot net, angular 12, angular machine test, angular 15, angular tutorials, angular tutorials for beginners, angular 17

Id: NgOsUmR5NVM

Length: 27min 48sec (1668 seconds)

Published: Mon Jun 12 2023