Create Sales Invoice app using Angular 14 Reactive forms (Form Array + .NET Core API + Bootstrap)

Hello friends welcome to Nigeria techies in this video I am going to explain how to implement sales invoice application using angular 14 reactive forms with the formary concept so this video going to be very interesting so before going to the implementation let me provide on chart demo this will give some good idea about my video okay this is my created application here I have populated the existing invoice related information now let me create one new record okay this create page how to section the first one is for a customer and the second section is for products okay by clicking this button we can include the products okay here we have on validation please select the customer so let me select the customer first so when I'm selecting the customer the default address including this email address and the phone number should be populated here so then I am going to click this button so the new row is generated here I am going to select one product work in the description uh default product name only loaded so if you want to include some changes you have to include it and this quantity the default value is 1 and the product price also loaded here so if you want to change you can change it like this so once you are changing this quantity and the price automatically the total also varying based on this quantity and the price so let me change this quality into three so you know it is changed now I am going to include one more product and the quantity and change it into two now see the first one is 585 then second one is 600. so the same time this summary also calculated you can see the summary total is w185 and based on this total the tax also calculated so here I have included on default value tax percentage is seven percent days So based on the total values it's calculated and finally this net total the sum of total plus tax is the net total and let me click this save button okay still will be home or validation field yeah so currently I have makes this invoice number as the default field okay now I'm going to save this once again you know so the invoice and number created successfully now let me edit this one okay the two products are loaded here I am going to include one more product okay so when I'm selecting the product automatically this total tax in a total error changed I'm going to save this one okay you can see this totally subdated now I am going to remove this product okay I'm getting one confirmation message when I'm clicking this OK the product got removed and also see this total tax net total everything should be calculated okay so let me save this once again see now our message is invoice and invoice number updated successfully and in this listing also it's populated the file loan is the delete operation again I am getting on confirmation message so when I'm clicking this okay so we are getting this remote successful message and also it is affected in our listing also for this application decent perspectives I am completely using this bootstrap only and the services I am using.net core maybe APA so it's loaded here I will explain little later so before that so we can start our steps so the first step is uh we have to create the application and see new so this installation takes some time meanwhile I will explain our APA so the service uh we have three important Services the first one is for the customer so this get all method will return all the customers and the second one is the get by code it will return the in digital customer information we have to pass the customer code is the input the similar way we have the product service also are the very important services in my services so the first method will return all the invoices so it will return the only Header information so the Header information means so this area including this invoice number customer address and the summary information also and we have the one more section for the product section so this product section are written by this get by detail method okay and we have this same method so you can see this object so first we are passing all the head related information and this detail we are passing as the array okay here we can pass multiple objects that means the single invoice have multiple products that's what our concept so this is all about the service for creating this service also I have created the separate video I will share that link in the description so if required you have to watch it I hope our application is created yes so let me open from vs code whatever application is opened now I am going to create the required components and services so for this application I am going to use two components first one is for listing and the second one is for our create screen so let me create it NC generate component and our common name is listing and the second one is create invoice and also we can create one service so let me provide the name as master okay our service also got generated so next as he mentioned the decent point of view I'm going to use this bootstrap so let me install this one so these are the basic steps so once we have done so we can focus on the functionality side so it will take some time and also I'm going to take one more package this is for our alert ngx toaster okay bootstrap is installed now I am going to install this toaster okay great our installation circuits completed I am going to include two CSS in our angular.json file so in this Styles we have one or default style was there so after that I'm going to include this bootstrap and also our toaster.css so when we are installing these packages in this node model you can find the files so that's what I just referred here now let me save this one at the next very important thing is let me go to our app dot model so in this app dot model I'm going to import a reactive for model because I'm going to use this reactive forms concept so it's your mandatory thing okay if it is not coming we have to include it manually so it is available in this angular forms so reactive for model and also we are going to consume this hddb services then we have to import this HTTP client model so this one is belongs to angular slash common slash http or the next one is toaster model so actually this is for the alert implementation okay so let me save it now I am going to run this application so most of the changes we have done I mean the configuration related changes okay our application is running now I'm going to refresh it one second okay this is the default template so in this app dot component we can remove the existing all codes so we can keep only the menu other things are not required basically and we can move this router Outlet also inside this content okay this is fine let me go to the routing file app routing model so here I am going to Define all of my routes first let me take this listing component and the path value I'm going to provide empty let me copy this one I am going to create two more routes so the next one is for create invoice component and the path name I'm going to provide create invoice okay and the third one is for edit so we can use the same component but in the path I am going to change this into edit invoice and this edit invoice how one parameter so the parameter is invoice number okay let me save it so you know it is saying in Vice verse let me go to our listing component so let me remove this one and we can include one due tag so in this pattern section I can provide like a listing so let me copy the same thing I am going to include in our create invoice page also we can modify a little later and in this header section I am going to include on anger tag and let me include this router link so in the value we can use this create invoice so let me save this one okay this is our default output so when I am clicking this create new it is redirecting into our create invoice component here I am going to declare on variable okay see this is our create page okay and the next thing is I am going to initiate our reactive form first so before that let me inject this form Builder but if it is not coming we have to import it so my form name is invoice form so this dot Builder dot group so here we can Define all the fields one by one so let me go to the services so the first one is invoice number and the default value is EMT and this field is required one let me use this validators here so okay we have defined our first field the similar way we can declare all the fields and the second one is customer ID so the invoice date we can provide some default value and the third one is customer name so the customer name is nothing but our description online and the next two fields are first one is delivery address the next one is remarks and then we have three more important fields so the first one is total then tax then total so these fields I am going to provide the default value 0. or else we can keep like this it's fine only okay we have added all the header related fields and the next one is detail so for this detail only we are going to use this formary concept so this dot Builder of array first I am going to provide one mtri so that's all about our Declaration of our form so now we have initiated our reactive forms next I am going to complete the design and also I need to map this reactive form controls with our relevant HTML controls and this field is the required field so let me include one span tag also so let me save this one okay our first field is included a similar way I am going to include all the fields the second one is customer and the third one is address and the fourth one is remarks for this customer I am going to use this select control and actually this div is for having our product related information okay this address and remorse we can use this text area see now so the text area is coming and the product details we can use these tables so product then quantity then price and the final one is total okay and we have to include one more column this is for the action okay our table is ready this tea body we will generate dynamically let me show you later so before that I am going to include this G footer so here let me include one anger tag okay and the final is the summary section so the first step will be summary total okay and the next one is summary tags then somewhere in a total okay so let me save it so these are the summary fields so next we have one button so here the class I'm going to provide so let me save this one okay this is somewhat fine and our design is Goods now I'm going to map our reactive forms okay so before the due I'm going to include one more tag form tag so in this form I'm going to use this form group so farm group is nothing but our reactive Farms so we already defined this reactive I mean this invoice form so let me include it so next we should have one event also NG submit save invoice okay so let me provide the basic definition so the functional DB can Implement a little later and the second thing is we have to map all the controls so the first one is the invoice number form control name okay so we have added let me save this one so in this submit event I'm going to have one console so let me provide some value I'm going to click this save so we can see in this console we are getting this invoice number so that means we are going to the correct path so let me include this form control name for all of our fields the second one is customer ID and the third one is delivery address then I believe it's your remarks yes so finally in the summary section the first one is total and the second one is tax and the final one is net total okay we have done and then we have to mention this form array so let me include this form Arena so here so here this array and name the first letter should be caps so our form array name is details so the next thing is tea body so as I mentioned we are going to generate in this Dynamic manner so let me complete the function of this adding new product first so here I'm going to have one click function add new product okay the function is defined next I am going to declare on variable invoice detail form array so let me import it here okay we have defined now let me try to access in our function this dot invoice detail equal to this dot our invoice for dot get so in our invoice form already we have declared this details section so let me try to access here as Farm array so I'm going to create one more function centrate row here I am going to return one from array I mean farm group so in this group we can Define all of our detailed related information I mean our product information so let me go to the services so here I'm going to take this invoice number first so the default value should be empty and the second one is product code yeah so actually this field is the mandatory one and the third one is product name this product name is nothing but our description only and we have three more controls so let me include it so all our amount related fields so the first one is quantity so in this quantity I am going to provide the default value is 1 okay and the second one is sales price so the sales price I'm going to provide the default value is 0. and the final is total so this total also I am going to provide the default value is 0 only and this total field should be disabled so let me use this object value is 0 and this disabled property also true so let me copy this one all of our summary field also should be disabled okay this is done and the next thing is so when I'm clicking this add new product I have to call this J generate row method and I need to push into our primary okay so this dot invoice detail dot push generate row okay this is fine let me save this one okay you have to see these fields are got disabled so when I'm clicking this button actually the new rows are not generated at the same time we can see in this console see now so in the details section we can see the information okay so the quantity is one sales so if I'm clicking once again see now currently we have this two set of Records okay now let me generate this uh Farm array controls here so for that let me create one getter function INB products so here I am going to return our formery only okay so let me copy this one I'm going to move on over HTML site so in this tea body I'm going to have one TR I'm going to create this for Loop entry for let item of server getter function dot controls and I'm going to declare one more property index so in the index value we can assign for our form group name so now let me create our Fields one by one so the first one should be one select control and our farm control name is so this name let me check from our generator product code okay so let me see now so one row is generated and we have this drop down button so so we can follow the same procedure let me include all the controls one by one so before that I am going to have one more 3D okay so this state is for having our serial number so here let me bind this index so basically this value starting from zero so I'm going to provide this plus one now let me copy this one so instead of the select I am going to use this input so other things let me copy here let me replace it and the form control name is product name and the next one is quantity then total so before that we have this sales price and the final TD is for having your action button so let me include an anchor tag here see now so when I'm clicking this one so the new rows are generated okay here this action button so looks like our class is not applied properly okay it should be a danger button danger okay and this select control we have some length 20 percentage okay see now so serial number is one so here we can add multiple products right now the next thing is we how to populate this customer drop down and also this product router okay so as of now we are not used our services let me move on our service side so we have the created Services Master services here I am going to inject HTTP client okay this one also not coming so we have to import it manually sometime it will come sometime it won't come which is not coming we have to include it like this common slash http the HTTP client okay first we can complete for the master functions so the first one is get customer and the same way get customer by code so it is having one parameters the same way for the product also okay so already I shown we have one created.net core services so let me take the URLs okay so this is the end point for our customer so return this dot http and our method is the get method so here we have to pass our URL so our first information is ready let me copy and include all of our methods so then we have to replace the URL that's it and the second one is get back code so if I'm passing this code I will get the individual customer information I am going to use here so instead of this hard code value we can pass in this Dynamic manner so let me remove it okay so the same steps we can apply for our products also okay this is my product services now let me take this code we can access our get pick code function so let me copy this URL and the steps are almost the same okay our service is ready now let me go to our create invoice component so in this Constructor I am going to inject our Master services and also I am going to inject the router okay this is fine and I'm going to declare two variables Master customer and master product we can create two functions also get customers here I am going to use server services so I get customer and let me subscribe this one so whatever value is coming I am going to ascend into over Master customer variable okay and let me copy this one I am going to create one more function so instead of customer we can use this product method I am going to save into our Master product variable okay so the next thing is so in this unload function I am going to call this two functions this get customers and also this get products now we are good to go so let me copy this master customer first so in this HTML side we have our drop down here I am going to generate this option in this Dynamic manner so we can use this for Loop NG for let item off okay item dot name and the value should decode so in this battery we can use this property binding concept item.code okay so let me save this one so we can see so all the customers are Got Loaded same way we can apply for our products also so let me copy this section and here in this table and instead of this customer we can use product okay because this product also having this code and the name so let me save this one see now all the products are Got Loaded at the second functionalities when I am selecting this customer so I have to populate the customer address into our address field okay so for that I am going to write on function here so the even name is changed so the function name is customer change okay so let me pass this input here I am going to Define here so here what I'm going to do let me call our services we have this get customer by code function I'm going to pass this code I am going to subscribe it so let me declare one variable here and let me assign it so if discussed data not equal to null here I am going to access our address field okay so this Dot the invoice form dot get this delivery address okay dot set value so let me check in the services so we have this address then phone number and email okay First Data dot address then I am going to include on comma and then we can include our next field okay let me remove this one actually we cannot get like this be hard to get like this get customer code equal to so anyway if there is an value change the data will be available in our forms so we can get our data from our Farms okay that's it okay now we are good to go let me save this one see now so when I am selecting this customer it's changed I'm going to change the customer now so you can see this mobile number and email IDs are varying because the data I am using the same address for all the customers okay so this function is working fine and we have to assign the value for one more field so that one is our customer name so actually I'm not used any separate field so that's what I'm going to set the value here so next we can move on this product so in this product also if I'm selecting this product I have to set the same product value into description and I have to fetch the current price and I need to populate in this place okay so that functionality also we can finish first let me go to this HTML side so here I am going to write this change function so here the function is product change but it is having one parameter so parameter is our index okay I am going to Define it here index okay in this case first we should know which row actually we are accessing okay so what I'm going to do first let me take our farm array and the similar way I am going to declare on farm group also so the name is invoice product okay so instead of this form I am going to use form group okay fine so let me copy this one so this Dot invoice detail at we have to pass this index value as form group okay so once we have the current row we have to get the selected product value let product code equal to so the same stuff we are already following in this customer side so we can copy the same code okay I'm going to change this customer code into product code and instead of this customer ID we can use this product code I believe yeah this product code okay so once we have this product code let me call our get product by code function here I'm going to pass this product code and I need to set the values first I am going to set for this product name so same mentioned this product name is nothing but our description and the same way instead of this custom data we can use like a broad data and here I changed and also we are going to set the values in our form group only so let me change this into form group okay and as I mentioned we have to change the sales price also so let me check in the Services What's the value actually we are having for our price okay we have this price only so let me include it okay it is coming zero so let me put this one into our console first so then Only We Know what is the value is coming so we are getting completely null value so let me verify okay this product code also I am trying to get from our invoice form that is not the correct one actually I need to get from inside of our form group only so let me change this one invoice product so let me save this one see now currently we are getting the exact value so in this price also got updated okay see for every price having the separate value so it is assigned so the next thing is be how to do this calculation so first we have to do this in digital calculation this quantity into price so once it's done we have to move on this summary calculation okay so let me Define one for a function here after our product change I am the function name is item calculation so here also our input is index so let me take this two lines first we are accessing our form array and then based on the index we are accessing the particular row okay so once we have this row we need to access this quantity and the price values so we have to complete our calculation so what's the value we are getting we need to assign this over total controls okay first let me take the value from this quantity under price so we already done for this product code we can follow the same steps here the first one should be quantity and the second field should be price for this price we have our control name is sales price so let me include it and finally total it's totally equal to quantity Enterprise okay and then we have to ascend into our total field so that also we have already done for setting values so our field name is total so let me save it so I'm selecting okay where it's not happening yeah okay I've created the function but actually I'm not called anywhere so what I'm going to do so when I'm selecting this product we are assigning the price and quantity so we can call here at this index we are already getting so this is the first place and the next so if you are changing this quantity we have to call this function the same thing we have to use for our price change also so you know say if I'm selecting the products automatically the calculation is happened so if I'm changing this quantity see now now I'm going to change the price also okay so next let me concentrate on this summary calculation so this summary calculation also almost a similar thing only summary calculation so every individual calculation gets completed we have to call the summary calculation for the summary calculation we have to get all the values from our farm array let array so this Dot invoice form get raw details so I mean raw value dot detail so it will give the value of our form array then I am going to make one for Loop and let me declare one sum total so the initial value should be zero so if there is see any data change I have to call like this total okay so once I have this value I have to assign in the controls so that we have done already so let me copy here server summary total field name is total only so let me take this sum total let me assign it so we can verify now if it is working we can apply for the next Fields okay see now we are getting this 300 so I'm selling one more product okay our summary total translation is working and the summary tags so as I mentioned I'm going to use this seven percentage of tax calculation some tax equal to it's okay once it's done we have to ascend into tax and the final one is net total okay sum total Plus some tax let me include here because you know even tax also got changed so let me provide 100 so then we will get exactly okay 100 so the digit we supposed to manage 10. okay so the total value is thousand and the tax is 70. so some method is 1070 okay so this is all about the calculation next let me include on validation so once I selected the customer only I have to allow for adding these products okay in this add new product function first I have to get the value of customer so that already we have done okay so here if the value is not equal to null or not equal to empty then only I am going to allow not equal to null and this customer code not equal to empty so then only I have to allow for creating the new records if else I have to notify the customer right so for that we have to use this inject toaster alert so let me inject this one first private alert toaster Services okay okay this one also we need to import it otherwise it will throw there from ngx toaster toaster Services okay so this dot alert that warning so first we have to provide the message and then title please select the customer and the title we can provide like a validation so let me save this one okay we are getting this validation message so if I'm selected one of the customer it will allow for adding the new products okay this is our first validation next let me concentrate on this save function for this save we have already created one function here what I'm going to do I am going to check the form has the valid records if it is valid only I will allow for the further action otherwise I have to give one morning message please enter values in all mandatory field okay so in this place we have to call our services and we have to pass the values if you are getting this success response we have to redirect into our listing page if there is any error we have to show this error message okay so let me go to our service side so we have to complete all the services for our invoice functionality okay so the first function is get all invoice and the second function is get invoice head there by code and the third one is get invoice detail by code so in this code we have to pass from parameters invoice number so let me do for our second function also and then remove the customer I mean remove the but the next one is remove invoice and the file loan is save invoice okay invoice data it's the input so here we are going to pass on object only so the first method is the git method let me copy this one and the second one also not take it method and a third on second method so we have to change this URL so let me go to my services I'm going to refresh it so this get all method it will return all the invoices and the second one is get invoice Header by code so let me take this invoice number I am going to access this function let me copy this URL here I'm going to modify it so instead of this hardcode value we can change our real data so the next one is get detail by code so basically this function will return the products so in this array format here also let me remove this hard-coded parameter and the next one is remove invoice so in this remote invoice let me change the method type enter delete and let me take this URL invoice last remove okay okay find one is save function I mean this is the first request so let me copy this one I'm going to include it here so instead of this delete let me change this into post and the end point should be save D and it is having one parameter this parameter is nothing but our object data so now we have completed in our service side so let me move the component so in this listing page as of now be not loaded any data so we can load the existing invoice information so for that let me inject the service here and then let me declare on variable so next I'm going to create one function load in twice so inside the function I am going to cut our services get all invoices then I'm going to subscribe it so I want to say how this data let me assign it over invoice header variable then let me copy this one in this HTML side inside so here I'm going to have one table first and then this T head here I'm going to have the classes BG dark for providing this black background and the text should be white so the First Column should be invoice number and the second one should be customer and the third one is total then this remarks so we can include this remarks so after that let me include this total so the price related fields we can have at the end in this tax and Network so the final field is action and then let me copy this variable so it is having this list of invoice information I am going to bind here first let me generate on follow so the first difference should be invoice number the similar way I am going to include all the fields so let me save and we can see the output okay there is nothing is loaded so let me verify yeah actually we have created this function but I'm not called anywhere so let me call this function instead of this NG audit okay great our datas are loaded uh currently we don't have any remarks and this amount we can apply for some pipes this currency pipe and also I have to include the buttons the similar way I am going to create one more button so this is for delete okay this is all about our invoice listing screen and the similar way once you are in this create screen uh we have to provide one back option so let me provide here also one button control and let me use this router link so if I'm clicking this back button it is just redirecting okay so the functionality point of it is working fine now let me complete this same function so in this create invoice component already I have this function so the data is valid let me call this services invoice and the value is this Dot invoice form get raw value so let me subscribe this one I am going to put this into our console So based on the response we can modify it okay so first I have selected this customer and the invoice number I am going to provide 0 0 pi and I selected only one product so initially we have this one it's fine so in this console we are getting this object okay let me remove this one before that I am going to click this save button so we are getting this save so the response is passed at this key value we are getting this invoice number okay so let me copy this one so if resulted dot the cell decolder pass would be how to provide an alert message so this dot alert success created successfully and the title should be so result dot key value let me copy this one I am going to include it if it is not passed I have to provide the error message error failed to save okay so this is all about the error message so let me save this one and also if it is saved successfully I need to redirect into our listing page so that's what I have injected this router so let me use this one navigate so let me save this one let me go to the listing page okay the last record we have created it's there okay now I am going to create one more record I env006 the customer is Chris Matthew and the products on t-shirt and the known Cricket pad now I am going to save this one so we are getting this okay pass message okay we need to modify this alert message text otherwise it is working fine it is just redirected into our listing page so in the listing me how to see this inv06 okay okay it should be a key value anyway it will work we have to focus on this edit Android delete function first let me complete this delete this should be a very easy store I am going to create one even first invoice streamer so let me copy this one I'm going to Define it here and it should have one parameter also here also I need to pass this value okay there I got result now let me complete this function okay so again I'm going to call this services and here this remove invoice and I'm passing this invoice number again I'm going to subscribe it so once I have this data without a check like this let me go to this condition okay so this alert is not coming so let me inject this toaster alert also here look at this CR dot result and also if it is succeeded uh we have to to refresh our listing okay and here title should be remove invoice okay okay we have done it let me save this one so before that we have to provide all confirmation message okay for this delete function do you want to [Music] remove this invoice [Music] so if it is confirmed only we have to go ahead and proceed this delete okay I am going to click this delete button so I'm getting this message do you want to remove this invoice so if I'm clicking ok so I'm getting this message remove invoice and removed successfully and also our listing got refreshed okay that means our direct function is working so the file will miss edit okay so let me complete this one also as soon as possible first in this listing would be how to bind this event so the function should be edit invoice let me copy this one I am going to Define it here so once I have this data I need to redirect into our create page so for that I have to use this router so let me inject it vibrate router so this dot router navigate by URL so we can use this navigate render also this navigate by URL so let me take the URL from our app routing model and then we have to pass this invoice number also so if I am clicking the select button so it is simply redirected so you are able to see this URL and it's redirected to our same create invoice page only so we have completed everything this listing component so the only thing is bending we have to handle this edit event in our invoice page so first we have to change this title instead of this create invoice we have to provide like a edit invoice for doing this sequence the function I am trying to get this invoice number so let me declare one more variable edit to invoice number okay so actually our invoice number is available in this URL only so be hard to get the activated URL okay for getting this one I am going to inject this activated route okay let me use this one active route dot snapshot parameter map get so here we have to pass this parameter name so the parameter name already we have defined in our routing side so this is the invoice number only so here I am going to check if this is not equal to null I am going to change this title we start beige tightly folded edit invoice see now our text got changed okay and the second thing is let me declare one more variable we said it my initial value should be false if there is an edit scenario I am going to change into 12. okay great the next thing is so we how to fix the data from our services and need to pop it in our controls okay so let me create one more function here set addition so let me call this function here so here the input should be in Western pocket so here I'm going to call our services first I am going to call our header services get invoice Header by code and the input should be invoice number let me subscribe it here I am going to declare on variable it's getting data of article to none we have to set the values so this Dot invoice form dot set values server first field is invoice number so edit data Dot invoice number and in the second field is customer ID so again edit data Dot customer ID and the next field is customer name and the fourth event is delivery address and the fifth one is remarks and the next field is total and then this tax the final installed total so this net total is not a filed on the file only server form array it should be a detail for getting this detail be how this separate service is so initially I am going to provide this empty value only so let me format this one see now so in this invoice number customer and address even somebody also because data so next thing is we have to populate these products also for that we have to call one more services so restart services get invoice detail by code invoice number dot subscribe it and let me declare one more variable here read it inv detail okay should be any so once I have this data let me add it okay so here I've done instead of this empty value you can pass this one and also we need to generate this rows right for doing this one I am going to generate from follow so insert that I'm going to call this add a new product okay okay so you know actually we are getting some validation error so that also we can handle it here so in this add new product I am going to apply one condition and it is applicable for only this adding scenario this is any time it's not required let's edit see now the products are Got Loaded okay so if I'm creating a new record it's when trying to add this button I am getting this validation message and in this edit scenario see now the products are Got Loaded okay I'm going to include one more product okay and this is the invoice002 I am going to save this one okay again we are getting this created a successfully at the same time our total card updated so anyway let me change this same message also so let me go to our save function yes okay here I am going to check if we see edit so whether it is a create or update we have to navigate in our listing page but the select message we can modify okay instead of this created successfully you can provide like a updated system so let me save this one I'm going to edit this once again in this remark testing edit I'm going to save this one see now updated successfully and also our remarked up later now I am trying to remove this product okay this function actually will not implemented so let me complete this one also so in this create invoice component HTML page button also so let me bind on the event click and the function should be remove product another parameter should be index so let me copy this one I am going to create the function so this remote product also I am going to provide on confirmation power you want to remove okay so once it's confirmed let me remove this one so this Dot invoice product dot remove it you have to pass our indexes so this invoice product should be a guitar method so once we removed we have to call this item calculate function arms we can call this summary calculation that is fine so let me say this one okay currently we have these three products I'm going to remove the final one parents let me remove the second round so I am getting this confirmation message so if I'm clicked the product got removed and also the summary is calculated once again 220 totally 430 okay so let me save this one so again getting this updated message and we can see this is the value okay great 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 this source code I will uploading this GitHub and then I will share the link in description so you have to use it so in my side I have only one request if possible try to join our membership and support my channel and this video I have used on darknet core baby APA for creating this VPAP also I have McDonald separate video I will share that link also in this description so if required you how to watch it and you will get more idea thank you thanks for watching

Channel: Nihira Techiees

Views: 16,340

Keywords: Angular 14 full course, angular 14 crud operations, angular 14 real time example, angular reactive forms example, angular reactive forms with form array, angular form array examples, how to do calculation in form array, how to access control in form array, form array tutorial for begginers, toast alert in angular, angular form array, how to access row in form array, angular crud operations using reactive forms, create pos application using angular form array, reactive form array

Id: F4sNN94X8hU

Length: 98min 45sec (5925 seconds)

Published: Mon Nov 07 2022