Complete Angular 7 Master Detail CRUD with Web API - Part 1

quick demo of this lesson in this video we are going to implement complete angular 7 master d real credit operations with espied or net web api using a rest or an app here we have the final output of the tutorial inside this restore and app let's make a new order here we have the order number now let's select a customer in order to select food items for this order you can click on this Add button here then from this drop-down you can select the food then change the quantity here then submit so here we have added corresponding food under this details table here like this you can add as much as food for this order in total this order costs around $17 so select the payment method here now let's make this order by clicking on the submit button here so here we have successfully created this order for Olivia Kathleen now let's check how to update this order for that you can click on this row here corresponding order items will be populated inside this form here and then let's make the required changes if you want to delete or add food items you can do that here after making required changes you can submit the form so here we have updated corresponding order if you want to delete an order you can click on this trash icon here then confirm this operation by clicking on this OK button here so here we have deleted corresponding order in this video and the next video we will implement this sample angular 7 project from scratch while developing this big application we will cover following points how to design angular 7 master detail form with pop-up dialog how to do insert update and delete operation with angular 7 and Web API how to retrieve and display master detail in angular with asp.net Web API how to design the DB for master detail with foreign keys and much more so I strongly recommend this whole tutorial before starting this video I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please be subscribe to this channel and click on the bell icon to get notification about my new videos most of the video LSN here also has a written blog post you can find the link in video description you can grab code from the as well what's up YouTube welcome to quarter fashion in this video I am going to implement angular 7 master detail quad operations insert update and delete with asp.net Web API in previous angular 7 and web api combination we have implemented symbol quad operations with employee details it would be better if he was that video force I have given the link in video description as the next step here we are going to implement advanced master detail current operations before getting started with this topic I would like to thank for your paypal donations I really appreciate your support in exchange I hope I can make helpful tutorials like this for those who would like to support this channel and my tutorials I have given a PayPal donation link in both force comment and video description without further ado let get started here is my visual studio 2 0 1 7 in order to create a Web API project go to file the Newland project select verb under wishes eShop then select a speed or net web application then name your application here I will name it as web AP I then select the location where you want to save this application then click on OK select Web API template keep other options as it is click on OK so here we have the brand new SB dotnet Web API project before continuing with this project I would like to setup the database for that here is my SQL Server management studio first of all let's create a database inside this application we are going to deal with order in a restaurant so I will name this database as per store and DB click on OK newly created database can be seen inside this databases note here so here we have the database a store and DB inside this restore and dB first of all I will create a table for customer normally inside this tab we will store the complete details about the customer for now we just need the customer name so first of all we have the ID column customer ID it's of the type integer and we have name column for customer name its of the type work 50 I want to set this ID column as the primary key I want to set this same column as an identity specification so select the column then go to column properties expand identity specification here said is identity as yes as you know columns with identity specification we don't want to insert values into the column SQL Server will take care of that it will start from 1 and incremented by 1 upon new record insertion in order to save a table in management studio you can use this shortcut control s or you can click on this save icon here I will name this table as customer surely greater double can be seen under this tablished node here if you can't see that just refresh this node here now we need a table to store food items inside the restaurant so let's create the table first of all we have the ID column item ID it's of the type integer and we have the name of the item it's of the type work out of 50 and we have the final column price it's of the type decimal 18 2 so we will have 2 decimal point I want to set this ID column as the primary key and for the same column I will set this identity specification now let's save the table I will name this table as item click on OK now let's create the master table which is order for a given order there will be a single record inside this tablet so for sofa we will start with ID column order ID it's of the type big int then we have order number it's of the type work 50 and we have customer ID it's of the type integer then we have payment method in short I will name it as P method it's of the type for cap 50 and finally we have the grand total it's of the type decimal 18 - first of all we have order number the logic behind order number generation can be different from different customer it might be a combination of branch code and a sequence number or whatever it may be we will store that inside this order number and we have the customer ID column in order to refer a customer from this customer table now I want to make this ID column as a primary key for this table I will set the same column as an identity specification for the tab expand identity specification set is identity as in order to save this terrible click on the Save icon here I will name this table as order and refresh this Tablas node here finally we have to create one more table which is details tab inside this master tab we only have the basic information about the order inside this details double we will have the details of food items ordered so first of all we have the ID column order item ID it's of the type big int and then we have a column which is too rough for the master table record order ID it's of the type baekeland and then we have the column item ID it's of the type integer finally we have the column for quantity it's off the type in the jaw so inside this order ID column we will have the master record ID from this order table and then we have the ID of the item selected for the order and we have the quantity of the order I will set this ID column as the primary key I want to make the same column as an identity specification for the tavern now let's save this table I will name this table as other items so while we make a new order it will save the master detail inside this order table and we will save this master ID order ID inside this order ID column here inside this details table so for a given order we will have one or more rows inside this details table order items based on the number of items you have ordered now let's define foreign keys among these tablets here so first of all I want to add a foreign key inside this master table order for that right click on keys here then click on new foreign key then click on these three doors here for tables and column specification for this foreign key we have ksama double as the primary t double and from that double we have the ID column customer ID and from this order table we have customer ID so whenever we insert a new record inside this master double order corresponding customer ID should be the inside this customer tab click on OK close in order to save this foreign key click on the same icon here click on OK and inside this details tab we have to add two more foreign keys so right click on keys and new foreign key first of all we have to add foreign key with item table from this master table item we have the column item ID and here we have to select item ID click on OK we need one more foreign key click on add and I will set order table as the primary key table from the we have order ID column and here we have order ID column click on OK close this window in order to save new foreign keys click on save click on yes now I want to insert fewer cores inside this customer and food items table item for that I have already prepared insert script so right click on this DB here then click on new query then I will paste this script here click on execute so here we have inserted fura course into customer table now we have to insert few food items inside this item table here so right click on this database new query I will paste this script here click on execute now if you execute select statement from both of these tablets we can see newly inserted records so here we have the existing customers and here we have the available food items from the restaurant now in order to work with this SQL server DB we have to add entity model into this Web API project so right click on models folder here add new item select data from the left panel then select ad or dotnet entity data model I will name this as DB models click on add select entity framework designer from database click on next click on new connection inside this connection property window we have to provide the SQL Server and database details in my case local backward slash SQL Express from this drop round we have to select the database restoring dB click on OK after creating this entity model there will be a class with this name in order to interact with the database we will create an object of this class in entity framework for now I will change this name as DB model click on next if you have more than one version of entity framework we have to select one of them I will select the latest one then click on next in this step we have to select database objects that we need to add inside the entity model we have to select all of these for tables click on finish so here we have successfully created the entity model here we have the diagrammatic representation of the four tables inside this entity model DB models dot EDF X we have these classes customer item auto and order items all of these classes are corresponding to each table that we have created inside SQL Server DB so we can use these classes as a model to create corresponding controllers so first of all I am going to create a controller for customer for that first of all we have to rebuild this project now let's create the customer controller right click on controllers add controller select Web API to controller with actions using entity framework click on add for model class I will select the customer class as a data context class we have DB model that we have mentioned during creation of entity model I will name this controller as customer controller click on add so here we have the customer controller as a result of entity framework scaffolding mechanism we have all the Web API method related to customer tab we have get Web API method and we have put employee method post method and delete method also for customer table we are not going to implement crud operations we are going to implement quite operations around order tab so for this customer table we only need this by method get customers it returns all the customers from the customer table we have already inserted few customers inside customer tab so let me get rid of the remaining web methods from here so here we have only one web method which returns all the customers from customer table here we have the dispose method which is used to dispose resources that we have used it inside this controller in this controller we have created an object of data context class that we have to dispose inside this dispose method here like this let's create a controller for food items or items table so right click on controllers add controller select the same scaffolding mechanism click on add for model class I will select the item class from here data context class will be same and I will name this controller as item controller click on add in this case also we just need this method get items which returns all the food items from item table so let me get rid of the remaining web methods from here now let's create the order controller select the same scaffolding mechanism for model class I will select order class data context class will be same and I will name this controller as order controller click on add so here we have created the order controller inside that we have all the required Web API method in order to implement cred operations and the various stages of this application development we will explain and modify these web methods here for now we can start with creating angular 7 project I'm going to create the angular project inside this project folder but we have already created the Web API project in order to create an angular project you have to run angular CLI command from your command prompt so first of all we have to open command prompt from this folder directory so hold shift then right click then click on open command window here now you can run this angular CLI command ng new I will name this application as angular 7 hit enter would you like to add angular routing type Y for years we start sheet format would you like to use a ballistic with CSS as a result of this command execution here we have the folder Angela 7 currently it is installing some default packages from NPM it will take some time so please be patient after a few mins later I have created the angular project inside this angular 7 folder in order to work with this angular project I would like to use we should studio code editor you can use the same visual studio itself so right click here then open with code for this angular 7 project I will use bootstrap so go to official website get bootstrap comm then click on this get started button here we have to add the reference for stand sheet and JavaScript files inside the project so first before we have the CSS let me copy this and then back to the project open index dot HTML then I will paste the CSS reference just above the head and tag after that we have these much JavaScript reference let me copy this then back to the index dot HTML we have to paste digest about this body and tag here along with this bootstrap I want to you for hours some icons so let me search for phone hours some CD and reference let me copy this then back to the application just below this bootstraps child sheet I want to add one more link and I will paste the CSS reference here before continuing with this application development further let me show you the structure of the application that we want to build for that I will add a new file here I will name it as AB structure dot txt inside that I will paste the structure so inside this application here we have the parent component orders inside this component we will list all of the orders that we have made and here we have the child components Auto and order items with this component we will design the form for master order and here we have the second child component order items inside that we will have a form for adding food items into an order we will show this form in a pop-up dialog and here we have the shared folder inside that we have both model and service class or entities inside this project first of all we have model and service class for customer and here we have item model and item service and here we have the model and service class for master entity order for detail trouble order item we have only model all of the quote operations related to this detail entity order we will do that inside this order service class here now let's create these components service and model class inside this project for that we can use angular CLI command from terminal I will use the integrated terminal from this IDE here we are inside the project folder and class seven in order to create a new component you can use this command ng G for generate C for component first of all we have to create this component orders let me copy this and paste in here now if we execute this command it will have the stylesheet we will have the HTML we will have a file with extension inspect or TS which is for test purpose and here we have the component type script file if you don't need these two files file with extension spec dot TS and this style sheet file in order to skip these two files we can do this first of all in order to skip this expect or TS file we can use this flag spec and we will set it as false in order to skip this separate stylesheet here you can use the inline CSS flag we just need to add this flag here inline style in short you can use single - then yes hit enter so here we have the newly created component orders inside that we have two files one for HTML one for typescript one we have skipped this spec tortillas file and for component specific CSS rules you can use this inline styles are a Styles here like this let's create remaining child components order and order items for that we can use the previous command with few modifications we have to create the child component inside this orders folder so orders for slash order hit enter we have one more component order - items hid under newly created child components can be seen inside this orders folder here order component and order items component like this let's create remaining service and model classes first of all let me clear this terminal here first of all I will create the service classes inside this shared folder in order to create a service class you can use this command ng G for generate s for service first of all I will create the customer service class so customer we have to create this service class inside the shared folder so shade forward slash symma this service generation command also create a test file with extension spec Dougherty is in order to skip that we can do this spec is equal to false so here we have the newly created service clause inside the shared folder like this we have to create two more service class so I will use the previous command with few modifications instead of customer we have items service hit enter after that we need a service class for order so instead of item we have order heat and out now inside the shared folder we have to create for model class for customer item order item and order unfortunately there is no specific command in angular CLI to create a model class even though we can do that with few tweaks first of all let me clear this terminal in order to create this model class we can do this ng g4j rate we have to create a class in short we can use CL here and here we have to create this class inside the shared photo so shared forward slash first of all I will create the customer model flaws so here we have customer this command here will create a file with class customer but the name of the file would be like this customer dot TS but as per the best practice or recommendations we have to add the suffix dot model dot TS for that we have to add this flag here type is equal to model hit enter newly created model class can be seen inside this shared folder here ksama model dot TS inside that we have the customer class like this we have to create remaining model classes so I will use the previous command with few modifications instead of customer we have item model after that we have order item finally we have order model so here we have done with creating components service and model classes now we have to update these model classes with required properties it should contain all the properties from this Web API models here other than this Web API model properties we may have to add extra properties when it comes to client side we will do that in various stages of the application so first of all let me update this customer model here for that I will copy these properties from this Web API model customer let me copy this and paste in here obviously there are difference in c-sharp and typescript syntax so we have to modify these properties tab declaration here it's of the type number after that we have name it's of the type string let me get rid of this public in and publish string from here like this we have to update remaining model classes you so here we have done with creating model crosses inside the application now we can start designing this application before that I would like to configure routing for this application while creating this application we have requested angular CLI to include routing module inside this application so you can see the app routing module here so in order to configure routing inside this application we can add those routes inside this routes array here so here we have the first route path is equal to orders so with this route we will display all the orders from our database so here we have the component and we will use the parent component orders orders component you can type the component name here while typing the component class name here we have the autocomplete if you click on that it will add the corresponding import statement at the top like this we have to create few more routes path is equal to order this route will have children routes so we can add this children are here and here we have the forced children route path will be empty and component will be order component from this rod we will detect a form to insert new orders into the application after that we have one more children route path will be something like this added and for this route we have a route parameter so we can specify that here for slash : ID we will use the same component order component for both of these child routes here based on the value of ID we will decide whether we have an insert or update operation so in order to use this route we have to make Erik like this forward slash we have the parent path here order and in order to access this route here we just need to do this four slash order then four slash edit four slash an ID of the order it will be something like five or six so based on the value of ID we will return a form for updating corresponding order so here we have defined all the routes required for this application finally I have to add a default route for this application so path will be empty string using this default route we have to redirect to this route here order and we have to set this path match as full for now let me comment this default route here and let me save all of these modifications here now let me run this application for that you can use this command ng then serve double - OH hit enter so this is how the default application looks like angular application created by angular CLI will have this default component app component and here we have the corresponding HTML app component dot HTML these codes here is responsible for this default view here in order to start designing this application I will start from this default component itself let me get rid of this default HTML here here we need a div with class jumbotron which is from bootstrap along with that we need one more class jumbotron fluid which is also from bootstrap jumbotron fluid inside they do for sir for we will have an h3 element with class display for in order to align the text in sand up we will add is class text - Sandow no all of these classes are from boots lab inside this header I want to name this application as restor and app below this head we will have a div with class container from bootstrap inside that we have another div with class raw so that we can use the grid system from bootstrap here we have the deal with class called MD 10 and we need an offset of 1 from both sides so we have offset MD - 1 inside this day we can add this tag router outlet so based on the route this router outlet tag will be replaced by the corresponding component HTML for example if we are trying to access this route here orders this router outlet tag will be replaced by the HTML of this component orders component let me uncomment this default route here and we save all of these modifications then back to the application here so here we are inside the order route by default this application will redirect to order route that we have defined here with the default route we will be redirected to order rod that means this child route will be invoked and hence this router outlet tag will be replaced by the HTML from this order component so here we have the default HTML from order component now along with this restorin app title I want to show an image so here is the image for dot PNG I will drag this and place this image inside this assets folder inside that we have to create one more folder I will name that as mg and I want to move this file into this IMG folder here now back to the component HTML here app component HTML inside this h3 element I will add this IMG ctrl and I will set this source forward slash assets /img 4/4 dot PNG we don't need this alt attribute here let me save this and back to the application so here it is now inside this route or inside this component or the component we have to design order form so let's look how to design the order form inside we component we can design the form inside this order component here before that we have to discuss how we are going to communicate between component different components inside this application so that here we have the app structure if you want to communicate between these components here we will add those such properties inside this order service clause here and we will inject this service class instance inside this app module dot es file here and thereby we can share same single instance of this service cross among these three components here in order to design the form inside this order component we need a property of the type order model that we can define inside this order service Clause here and we will inject this service class inside the app module dot ES file so here we have the property form data it's of the type order class if you click on this corresponding import statement will be added at the top now we have to inject this order service inside this app module tortillas file here for that we just need to add this order service class inside this providers error here so here we have injected the order service class inside this app mode is filed in order to add the corresponding impose statement while typing this class we will have the auto prediction or otherwise you can hold ctrl then press P read or dot symbol and it will fix the import statement click on this post statement here so here we have added the import statement in order to use the same instance of this service class inside this order component here we just need to define a private property inside this component constructor so private service sorry service it's of the type order service class now open corresponding HTML file here first of all we need a form you don't need this action attribute here insert I will add a local reference for it's equal to ng form and we have to set this autocomplete as off so that we can prevent autocomplete inside input controls inside this form we are going to design this form based on this form data property inside this order service we have an instance of this injected order service inside this order component because of this property here service so we only want to display this form whenever this property is initialized so I'm going to use this ng if here we will show this div only when this property form data is not empty or undefined so we can do this service dot form data I am going to divide this form into two halves using bootstrap grid system so we have to deal with class row inside that we have the first column div with class called md6 like this we need one module so let me copy this and pasting below that first of all we have the div with class form group inside that we have label you don't need this for attribute let me get rid of that first of all we have the order number so order number and after that we have an input control with class form control from bootstrap we don't need this type attribute by default input controls will have the type text so let me remove that now we have to use two-way data-binding from this form data property okay first of all we have to set this name attribute and I will set it as order number after that we have the local reference so order number is equal to ng model after that we have the two-way data-binding ng model here we are going to bind this property form data inside that we have the order number this is what we want to bind in to this input control here so this is what we do service dot form data inside this form that we have this order number so let me copy this and paste in here form data dot order number like this D we have to add 3 more divs for remaining properties so let me copy this and facing below that rest of the divs can be added inside this second grade column here second div here is for customer so customer for customer we have to show a drop-down so instead of this input control we need a select control for this select control we have to add an end tag here select now we have to update these properties accordingly we have to bind this control in to this customer ID property here so let me copy this and replacing order number with customer ID inside this select control we have to list customers from our customer table inside the SQL Server DB that we can do in a bit for now I will add the default option here value will be zero inside that we have the text select after that inside the second column as a force control we will have the payment method so I am going to replace this order number with payment method for this field also we need a select drop-down so let me copy this and pasting here and instead of this customer ID we have to bind to this property here P method so let me copy this and replacing this customer ID here and inside this final day I want to show the grand total so here it is grand total and for this input control we have to bind this G total property so let me copy this and replacing order number here finally in order to submit this form I'm going to add a submit button outside this good system here so we have div with class form - group inside that we have the button with type submit with classes BTN and BTN dark from bootstrap button text will be submit along with this text I want to show for our some icons so here we have the I tag with class 4 then 4 - database here we have designed this form using template driven approach so we have to add corresponding module inside this app module dot TS file here 4 so 4 we have to add the corresponding impo statement here import from angular forms we have to import forms module now let's add the class inside this import array here as you can see here here we have defined this form using this form data property from this service class here we have defined the object form data we have to initialize these inner properties here that we can do inside this order component here that I will define a separate function here we set form with a single parameter form it's of the type ng for click on this so that it will add the corresponding import statement at the top now inside this function first of all we just need to call this reset form function and we will reset this property here this dot service dot form data is equal to here we have an object first of all we have the order ID I will set it as null after that we have order number order number of you said it as empty string after that we have customer ID customer ID I will set it as 0 payment method P method I will set it as empty string since payment method is of the type string we have to set it as empty string so we have to change the default value for this select control here we have set it as 0 now I will change that as empty string now back to the function reset form after payment was that we have G total I will set it as 0 for this order number you will have a logic to generate this number like I told you before it might be a combination of branch code company code including date or a sequence number whatever it may be for now I am going to use random six digit number for this order number property here in order to generate the random six digit number this is what we can do for surfer we have the smallest six digit number which is 100,000 into that we can do this math dot round function can be sorry random function can be called and we have to multiply this with nine hundred thousand so this random function will randomly pick a number between the range zero to one but not one operation here will return a random six digit number in order to get the integer part we can do this math dot floor function can be called and in order to convert this into a string we can call this two string function here for now this is what we need inside this reset form function now we have to call this function inside the ng or a lifecycle hook here reset form function while we invoke this function from ng on a life cycle hook we don't have a value for this form parameter so I want to make this as nullable and I will add this if close here we only want to call this a set form function when we have a value for the form parameter now let me save all of these modification here so here it is by default here we are inside the order route here we have shown the order for now I want to make few more modifications for these form controls here so go to bootstrap documentation here and then switch to forms forms documentation and let's have a look how to add prepend to input controls so this is what I meant by prepend we have to add prepend to these input controls here order number and grand total so back to the component HTML here order component HTML first therefore we will have a with class input - grew inside that we need one more dip so let me copy this dip from here and pacing inside that instead of this class input - group we need class input group prepend inside that we need one more deal so div with class input - group - text inside that we will add this pound symbol now we have to move this input control into this input group Dave here so this is how we can add prepend to an input control using bootstrap let me save this let's have a look here so here we have added this prefix pound symbol now we have to do the same for this grand total so let me copy this div with class input group and pacing here for grand total and I want to replace this input control with grand total instead of this pound symbol we will have dollar symbol and we save this then back to the application so here it is both of these input controls should be read-only so we have to add this attribute here read-only same for this order number also we will populate this control dynamically using SQL Server double customer that we can do in a bit before that I want to add few more methods into this payment method so back to the HTML here here we have the payment method I will add two more options here cash value will be cash and text will be cash and this one for card save back to the application now I want to make few more modifications in order to change overall appearance of this application for that I am going to use the global stylesheet stars dot CSS here first of all I want to remove the padding for this tip with class Jumbotron so we can add the CSS rule here after that I want to change the border or form controls to somewhat blue so this is what we do finally we have this tablet raw CSS role in order to show color band we hover on tablet rows we will use this CSS rule when we least orders that we have saved let me save these modifications here back to the application though here we have done with designing master part of this form now we have to include details part also means inside the same form we have to have an option to add or select food items for the order for that inside this order service class here I am going to add a new property it will be auto items other items it will be of the type order items model array so here we have the array inside this order items array we will manage food items selected for the order so using this array property here it will show a table here so back to the component HTML here order component HTML so here we are going to add a table for order items order items double so here we have the table with classes table and we have one more class table - borderless all of these classes are from bootstrap inside this table we have tea head with class t hat - light it will add a background color to this table header inside the first column we have item like this we have to add three more columns so let me copy this and pasting below that three times four so four we have price and then we have quantity and finally we have total after all I want to add a th for actions like edit and update body part of this table in order to display a selected food items we have to iterate through this array order items so this is what we do here we have the TR element and here we are going to use ng for deductive and G for LED item of service dot order items first of all we have to show the item name here so item dot item name like this we have to display three more properties so let me copy this and paste below that price and then we have quantity like this we need one more column so let me copy this and paste below that instead of quantity we have total and inside this last column here we will show action buttons edit and delete in a as you can see here this property order items is an array of this type order item inside this class we have few limited properties which is copied from the web api model in addition to these properties we have to add few more properties like we have item name price this is what we can do we have to add item name here it's of the type string and then we have price quantities here and we need total also so price it's of the type number and we have total it's of the type number now back to the order items table here initially inside these order items are a we will not have any elements so in that case we have to show a row saying no item selected for this order so here we have the row inside that we have this TD element with classes phone - italic and we have one more class text send up inside that we have to show this no food item selected for this order we only want to show this TR element when there is no item inside this array here order items so this is what we can do we will add the ng-if directive here ng if inside that we have this condition service dot order items dot dot length if length is equal to zero means there is no item inside this array now inside the reset form function here I have to set the RA into an empty array so this dot service dot other items and here we have the empty array let me save all of these modifications here then back to the application so here we have the tablet to list food items selected for the order I want to make few more modifications here instead of this display title I want to show food and we want to set call span for this TD element here so back to the HTML instead of this item title I want to show food and for this TV element I want to set call span call span here we have in total we have five columns so I will set it as five save then back to the application now we have to implement the option to add or select food items into this order and thereby we can show the selected food items under this table here for that I'm going to add a button inside this last th element of this tablet so back to component HTML here so here we have the anger element with classes from bootstrap ptn then BTN - SM then we have BTN - success and then we have to show text inside this button as white so we have this class text - white now let's wire up a click event for this button so here we have the click event it will call this function add or edit order item now let's define this function so here we have the function add or edit order item and here we have the function definition inside this function we are going to open this component order items component HTML in a pop-up dialog where we have to design a form to insert or update existing food items selected for the order in order to do that for this function we need two parameters first parameter will be order item index and then we have order ID now from this component HTML we have to pass values for these parameters so here we have the function add or edit or the item as part of this button click event so for this first parameter order item index I'm going to set value as null so we will pass null from here after that we have to pass order ID value that we can retrieve from this parameter here so let me copy this and paste in here form data dot order ID here we have called this function in order to insert or add food item into this order we will call this same function to update a selected food item for the order for that we can add and edit icon inside this last cell here so let me copy this same anchor element from here and I will paste that inside this last TD cell here instead of this BTN success we need BT and info clause and inside this anchor element you don't need this text and I want to change this phone our sum icon instead of purse I can't be need an icon with pencil so I will use this class for - pencil now we have to change the parameter for this function here here we have to pass the index of this item inside this array here in order to get index of item on each iteration we can do this latch I is equal to index now we can use this I variable inside this event here now back to the function here so inside this function parameter we have the data that we need to pass from this order component into this order items component which is needed for the further operations on food items for the order when we click on this button here we have to open this component order item in a pop-up dialog for that I am going to use angular material pop-up dialog we have already discussed angular material in great detail with an example project from scratch I have given the series link in video description if you have not seen those videos please watch them where we have discussed how to use angular material pop-up in great detail for now let's look how to open this order items component when we click on this button here so first of all let's look how to install angular material into this angular 7 project here so you can go to this website material dot angular dot IO then click on get started we have to install these packages here angular material and colossi DK and angular animations in latest versions of angular this angular animations package will be the by default even though I will just copy this whole command and then back to the application here open one more terminal then paste the npm command here hit enter so here we have done with installation of these three packages now we have to configure this angular material so back to the documentation here we have to add this browser animations module inside app module dot ES file so first of all let me copy this imposed and then open app dot module dot e is filed let me paste the import statement here we have to add this browser animations module inside this impulse array here along with that we have to select a theme from angular material so I will use this theme here indigo pink so we have to add this CSS stylesheet reference inside the global statute so let me copy this imposed statement from here then open styles dot CSS then I will paste this reference at the top that's it so here we have configured angular material into this project now let's look how to work with pop-up dialog in angular material for that you can go to this components here then click on this pop-ups and models and click on dialogue so in order to work with this dialogue here we have to add corresponding module that we have shown here mat dialogue module so we have to copy this imposed statement then open app dot module dot ES file let me add that import statement here and we have to add this class inside this impulse array here now back to order component here inside this function we have to open this component order items from this function for that first of all we have to inject this math dialogue class here so we have to add this constructor parameter private dialogue it's of the type math dialogue you can click on this class here corresponding import statement will be added at the top now inside this function here we just need to do this this dot dialogue dot open function can be called as a first parameter to the function we have to pass this component order items which is to be opened inside the dialogue so here we have to pass the component all the items component now in order to open this component in dialogue we have to mention this component as entry components inside app module dot es file here so here we have to add the array entry components now back to the component function here along with this first parameter we can pass one more object in order to configure the pop-up dialog for that we can use Matt dialog config class from angular material so let me import that loss here Matt dialog config now here I am going to make a constant of this Matt dialog class so dialogue config is equal to new Matt dialog config so dialog dot config first of all I will said auto focus as true so that when this pop-up dialog opens the first component inside the dialog will get refocused after that we have to set disable close disable close so that it will prevent the dialog from closing when we click outside the dialog after that we have to set the width of this dialog so we can use this width property here and I will set it as 50 percentage finally we have to pass these two data order item index and order ID into this component using this pop-up dialog so we can do this dialog config property dot data property can be set with a new object here inside that we have to pass these datas here order item index and order ID let me copy this and paste in here now as a second parameter to this function we can pass this dialog config object let me save all of these modifications here then back to the application click on this button so here we have opened order items component inside this pop-up dialog and here we have the default text from the component now inside this order items component we have to design a form to do insert an update operation for the food items inside this order here so let's look how we can do that so back to the order items component so first therefore I want to add import statement for required classes from angular material so here we have the import statement and we have to import few classes from angular material angular forward slash material we have to import these two classes mat underscore dialogue which is required to receive these two data that we have sent while calling this open function here okay after that we have this class mat dialogue graph mat dialogue ref this mat dialogue rough class object is required to do further operations on this pop-up dialogue here sorry this mat dialogue data is not a class it is a constant in order to use this constant we have to do this add inject decorator inside that we have this mat dialogue data in order to use this inject we have to add this import statement at the top and here we have the constructor property public data after that we have to create an object of this mat dialogue ref public dialogue ref which is of this type mat dialogue graph for the component order items component so here we have done with adding constructor parameters now inside this component we have to design a form to add or select food items into the order for that I will add this property here form data its of the type order item model inside that we have these much properties now using this property you form data we have to design reform inside this component HTML here first of all we need a heading h4 with class display for from bootstrap inside that I will show this heading or the food item after that we need a horizontal line separation so here we have it's our element after that we have deformed we don't need this action attribute here instead I will add this local reference form which is equal to mg form and we have to set autocomplete as off first of all we need a deal with class form - group inside that first of all I want to show the food item drop-down so I will add this label inside that we have to show this text food item for this field we have to show a drop-down using select element like we have done inside this order for customer so let me copy this select element from here and pasting here and we have to make required changes here first of all we have to change this name it will be item ID and we have to update this local reference also and we have to update this two-way data-binding we don't need this service property here we have directly define this form data inside this component here for this select drop-down also we have to fetch the course from our SQL server table items by consuming Web API project that we can do in a bit before that let me complete this form design after these food items drop down we have to show fields for price that means based on is selected item from this food items drop-down we have to show the corresponding item value inside the textbox so it will be similar to this the and total here so I will copy responding HTML from this component here so here we have the corresponding deal let me copy this and paste in here and we have to make the required changes here instead of grand total we have price and we have to change these attributes also input control name will be price and we have to change this rocker reference food item price is also pretty determined so we have to keep this read-only attribute here after that we have to show an input control for quantity so let me copy this D from here and piece him below that and we have to update correspondingly we don't need this prepend dollar so I will remove this and we have to make changes accordingly quantity let's update these properties here user must be able to enter quantity of the food so we have to remove this read-only attribute from here now I want to show these two divs for price and quantity in a single draw so we can enclose these two divs inside another div with class form - draw we can enclose these two form group divs inside this form draw deal here and each of these divs will take half of the rows so we can add this class here call - MD - 6 we have to add the same class for this second div also finally we have to show form controls for total inside the total text box we will show the result of the multiplication between price and quantity corresponding fields appearance will be similar to this price here so I will copy this do from here and I will paste that here and let's make the required changes instead of price we have total this field value is calculated so I will keep this attribute read-only here finally we have to add a submit button so here we have the deal with class form - group inside that we have to add submit button like we have added inside this order component here so let me copy this button from here and paste that here it would be exactly similar to that one along with this button we need one more button to close the pop-up dialog so I will copy this and pasting below that this button type will be button and I want to change this button class here BTN - outline - dark since we have two buttons side by side I want to add a small left margin to this second button here so we can add this bootstrap class here ml - 1 also I will use a different phone our sum icon I want to change this button text also instead of submit we have close so here we have designed a form for food items using this property form data now we have to initialize this form data property inside this ng on it lifecycle hook here so this is what we can do this dot form data and we are going to set a new object here it should be of the type this class order items so first of all here we have the details ID order item ID since we are going to make a new food item so I will set it as not after that we have the master ID order ID value of master ID is passed from this component here using this data property and we can retrieve that use this constructor property here data so this is what we can do this dot data dot inside this data property we will have a property with this name order ID inside that we have passed the master ID value so that we can set here after that we have item ID I will set it as 0 and then we have item name I will set it as empty string and then we have price 0 then we have quantity I will set it as 0 and finally we have total now let me save all of these modifications here then back to the application here and click on this Add button here boooooo so here we have the form to add or select food items into this order here now it's time to fetch food items and display them inside this drop down here we have already populated few food items inside this item table here in order to retrieve these records we can consume this item controlled web api method get items here for that let me run this application so right click on this Web API project then view click on this view in browser so here we are running Web API project from this port number now we are going to consume this Web API method get items from this item control where we have a problem this Web API project will block application which is hosted in a different domain or different port number like in this case we have osted this angular application in a different port number so this Web API project will block request from this angular application here we will call this situation cross-origin resource sharing in short we can say see o RS course so we have to enable course inside this Web API project here for that select web API then go to tools then n you get package manager then package manager console in order to enable course inside this Web API project we have to install and you get package course so we can use this command here install package microsoft SP dotnet web api course using this command we can install this package course I have given this command in video description you can copy paste from the now let's execute this command so here we have done with installation of the package in order to check whether we have installed this package successfully you can rebuild this project and then reload this Web API project if you can see the homepage lag before means installation of the package is successful for some of you you can see errors due to version compatibility in web api core package in those cases you can execute these two commands i have given these two commands in video description after that everything should work as expected okay now back to the web api project here now let's enable course inside this Web API project for that we can open this folder app start inside that we have Web API config dot C s file here we just need to do this config dot enabled cause inside that we have to pass an object of an able course attribute class so this is what we can do new an apple course attribute in order to use this class we have to use this import statement here system dot web dot h TT t pecos inside this function as the first parameter we have to pass the URL of this angular application here so let me copy this and now let's paste that here make sure to remove the forward slash at the end of this URL after that we have to set this headers and I will set it as star after that we have methods I will also say it as star so with these parameters headers and method we allowed all the combinations of headers and methods like get post and delete etc so here we have enabled course inside this Web API project for this angular application here now we can consume Web API methods from this angular application here inside this Web API project I want to make one more change i want to disable proxy class creation in entity framework it is used for change tracking and lazy loading in entity framework I have seen few errors because of this feature we don't need this feature to develop this application so I will disable this feature in order to disable this feature we can open the DB context class here DB models dot context dot CS inside this class constructor we can do this base dot configuration dot proxy creation enabled and I will set it as false here in order to apply new changes inside the running Web API instance we have to build this project again now let's consume this Web API method get items from this angular application here first of all I want to add this Web API Base address inside this application for that we can go to this enviorment folder inside that we have this type script file environment dot TS inside that we have this constant environment here i will add one more property api you are l and i want to paste this web api URI let me copy this and pasting here into that we have to append this API also because all of the Web API method has is prefix API so we can add that here forward slash sorry instead of equal symbol we have to use : in order to consume this Web API method get items I'm going to use this service class here items dot service dot TS in order to make an HTTP request we will use HTTP client class for that first of all we want to make a constructor property private HTTP which is of the type HTTP client class in order to add corresponding import statement hold control then press period or dot symbol we have to import HTTP client from angular common HTTP in order to use this HTTP client class here we have to add corresponding module inside app module dot T as file here we have copied the HTTP impo statement I will paste that here instead of HTTP client we have to use HTTP client module we have to add this class inside this imposed array here then back to the item service class in order to retrieve food items I will define a new function here get item list and here we have to do this this dot HTTP dot get function can be called because here we have to consume this Web API method of the type get as a first parameter to this function we have to pass corresponding URI first of all we have to add the base URL of the web API project that we have stored inside the environments constant inside the API URL property so enviornment you can select the appropriate import statement from here dot API URL into that we have to add this forward slash item this get function will and observable and I will convert that into a promise so we can call this to promise function and we will return this promise from this function here now we can call this function inside this order items component here first therefore we have to inject item service class here so first of all I will add the corresponding constructor property here private items service it's off the type item service class now inside the ng on a lifecycle hook we can call this item service function get item list so this dot item service dot get item list function can be called it returns an absorber so we can call this then function here so here we have the callback function with single parameter response inside this parameter we will have a JSON array containing these much food items we have to store that inside a property here so I will define this new property here item list it's of the type item model array and inside this error function we can do this this dot item list is equal to response finally we have to cast this response as an item array so we can do this as let me copy this and paste in here now using this array item list we can populate this drop-down food items here for that we just need to add one option element here inside that we will iterate through the item list for that I will use the ng for directive ng for is equal to let item of item list now we have to set value for this option and we can do that using string interpolation inside this value add we have to show the item ID so we can do this item dot item ID and for the option text we have to use this property name so let me copy this string interpolation and pasting here instead of item ID we have made let me save all of these modification here and back to the application here click on this Add button here then expand this drop-down so here we have retrieved and populated food items from this table items from SQL Server Tavel now we have to do a few more things here when we select an item from this drop-down we have to fill the corresponding food item price inside this input control here so let's look how to do that for that we can use the change event of this drop-down so back to the component HTML inside this select drop down here I want to add a new event change when this event is triggered we will call this function update price into this function we have to pass a reference for this select drop down for that we can do this we have this dollar symbol then event dot target can be passed now let's define this update price function inside this typescript file here with a single parameter control inside this parameter we have the reference for this select element here first of all we will check whether the index is zero or not so control dot selected index if selected index is zero we can handle that inside this if close here this dot form data dot price is equal to zero when we select the first item means we have selected this default option in that case we have to set price as zero and here we have the else part inside that we can do this this dot form data dot price here we have to set selected food item price from this array here item list so we can do this this dot item list inside that we have to pass the corresponding index so let me copy this selected index inside this select drop down we have an extra option for this default which is the force element inside this select drop down here so selected food item index from this array will be less than that of the index from the drop down so here we have the item from that we have to return price here we have an error let me check the item model inside that we forgot to add price property we have already have that property inside this VIP I model so let me add that property here price it's off the type number now let me save all of these modifications then back to the application here click on this Add button here select a food item corresponding food price is populated inside this text box here along with this price update I want to update the corresponding item name inside this form data property item name here so let me copy this and paste in below that instead of price we have item name and I will set it as empty string let me do the same inside this else part also instead of price here we have name for this item name property we have not yet added a form control inside this form element here we have to add that then only we can access those property values when we submit before so I will store them inside and input hidden field input which is of the type hidden like the other controls we have to add these properties local reference name and data binding let me copy this and pasting here let me update these properties accordingly item name along with this item name hidden field we have to add hidden fields for these ID properties also we have to retrieve these properties when we submit the forms for that let me copy this hidden field and pacing that here two times instead of item name first of all we have order item ID and then we have order ID save all of these new modifications back to the application let me open the dialog when we change a food item here we will update the price here like ways when we update this quantity here we have to change the total here also it should be as the result of this multiplication between price and quantity we can do that inside this textbox key up event so back to the component HTML here we have the quantity textbox let's add the key up event key up and we will call this function update total now let's define this function inside the typescript file here this dot form data dot total is equal to this dot form data dot quantity into this dot form dot price this multiplication result will be a fraud number I want to limit the decimal to two numbers so we can do this into this we will call this to fix it function and we want to limit the decimal into two digits so this function will return a string you want to convert that into float so we can call another function pass float let me save all of these modifications back to the application open the dialog select a food item corresponding price is updated here now let's update the quantity at the same time you can see the total based on the multiplication result we have to call this update total function when we change this food item also so let me call that inside this update price function which is called inside the change event of the drop-down so let's call this function this dot update total function can be called here so thereby we have done with calculation inside this order food items for now I want to submit this form thereby we can add the new food item inside this order table here before that I want to implement the click event for this close button and we click on this button we have to close this pop-up dialog for that we just need to add an attribute into this close button here from angular material so here it is Matt - dialog - close let me save this back to the application open the dialog click on this close button so here we have close the open dialog now let's check how to submit this form so that we can add a new food item into this main form table here for that here we are going to add a submit event for this form here submit when we submit this form we will call another function on submit into that function we have to pass this form local reference now let's define this on submit function inside the typescript file here on submit with a single parameter form it's off the type ng form now let's add the corresponding import statement for this ng form class whole control then press period or dot symbol then select the appropriate import statement in order to add a food item into this order here we just need to push that element into the order service property that we have defined here or the service inside that we have this order items we just need to push the new form data into this array here in order to add a new element into this array here first of all we have to create a private property inside this constructor of this order service class here private order service it's of the type order service class now inside this function we can do this this dot order service dot order items dot push into this function we have to pass an object containing new details of the selected food so we can access that from this form object so we just need to do this form dot value property can be accessed inside that we have values from these form controls after adding these food details we can close this pop-up window here for that we just need to do this this dot here we have the reference for the opened pop-up dialogue dialogue ref so this dot dialogue ref dot close function can be called let me save all of these modifications and back to the application here let's add a new food item click on submit newly selected food item is added into this details table here like this we can add as much as food items we want okay inside this form submit event we have to validate this form here that means there should be at least one food item selected from this drop-down and quantity of the food item should be greater than zero so let's implement these validations in order to work with validation I'm going to add a new property here is valid it's of the type boolean and I will initialize that with now let's define a new function to validate these form controls so let's define the function validate form with a single parameter form data it's of the type order item inside the function first of all I will set the is valid property as true and here we have the if clause inside that we will check this form data dot first of all we will check by the item ID is zero or not if item ID is zero means there is no food item selector so we will reset this boolean property to force and here we have the else if block inside that we will check whether the quantity is zero or not so let me copy this and pasting here instead of item ID we have quantity in that case also we will reset this boolean property finally from this function we have to return this boolean value return this dot is valid now let's call this function inside this on submit function we will do the insert operation only if the form is valid so we can do this if this dot validate form function can be called into that we have to pass the object containing form field values if this function returns true means form is valid otherwise we won't do anything now inside this form we have to show validation error indications when form validation fails first therefore we have the food item drop down here into that I'm going to add a CSS class from bootstrap so this is what we can do class dot is invalid class can be applied this is a class bootstrap it will apply a red border around this select control we have to apply this class based on this condition here is valid property is not true and the item ID value is zero so here we have the property form data or item ID it is equal to zero and this property is false we have to apply the same class for the quantity textbox so let me copy this and here we have the control let's paste that here instead of this item ID we have quantity let me save all of these modifications here and back to the application so here we have applied bootstrap class is invalid to both of these quantity and select drop down for the item ID here we have misspelled item ID instead of small I we have capital I let me save all of these modifications here then back to the application let's try to submit this form with default values so here we have the validation error indication around these two controls select drop down for food item and quantity textbox now let's try to submit this form with proper details I will select a food item then let's enter the quantity then click on submit that's it now let's look how to update or edit selected food item details for that here we have already added this edit button here we have the edit button into that we have binded the same function add or edit order item which we have called for this add button also into this function we have passed index of this item from this array order items and here we have the master ID order ID now let's look what we have done inside this function here other item index and master order ID details into the pop-up window that we can access from this component order items component here we have the end on a lifecycle hook here we have resent deformed property form data with initial values this reset operation is required if we are going to add a new food item into this table here if we are going to edit or update existing food item details we have to populate corresponding selected food item details into this form here so we have to update this ng on a lifecycle hook here so here we have the if Clause inside that we can do this this dot data property contains the data informations that we have sent from this auto component so this is what we can do data dot all the item index property contains the index of the selected food item that you can see here for an existing item the value of the index will be 0 or greater than 0 in case of new record it will be not so we have to do this so we have to reset these form properties if the value of this index is none otherwise we have to populate this form data property corresponding selected food item details for that we can do this this dot form data is equal to here we have to assign corresponding element from this tablet which we have stored inside the orders of his property here or the service property order items so we can do this here we have already injected the service class order service inside that we have the list other items and here we have to provide this index let me copy this and paste in here here we have directly assigned the corresponding array element into this form data instead of that I want to assign a copy of this element otherwise when we open this form for edit operation whatever changes may be inside this form will be reflected at this same time inside this table you don't need that so I want to make a copy of this element and then we can assign that into this form data here for that we can do this object dot assign function can be called as a first parameter we have an empty object as a second parameter we can pass this object here let me save all of these modifications and then back to the application here now let's add a food item into this order submit now let's try to open these food details for edit operations corresponding selected food item details are populated inside this form now after making require changes here we have to submit this form and we have to update that corresponding element inside this table here for that we have to update this form submit event which we have written inside this function here on submit here we have called this full function in order to insert a new record for update operation we have to do something else so I want to add an if clause here inside that we will add this same condition that we have turned inside this in the only life cycle hook if the order item index is now we will do the insert operation otherwise we will do the update operation so here we have the else Clause inside that we can do this this dot order service dot other items are inside that we have the corresponding elements and here we have to provide the corresponding selector food items index so here it is let me copy that and paste in here into that we have to set the current value of form controls from the form so let me copy this form dot value property contains the updated values let me save all of these modifications and back to the application let's try to add a new food item now let's try to edit the details I will select a different food item and then let's change this quantity submit so here we have updated corresponding for details inside this table also now let's try to delete a food item selector from this form for that we are going to add a new icon for delete operation inside this last tablet cell for that let's open corresponding component HTML order component HTML and here we have the details table inside the last cell here we have the anchor element for edit operation let me copy that and paste below that and we can make the required changes for delete operation instead of this PT and info class we need Beatty and danger class since we have two adjacent buttons we have to add a left margin for the second button so I will add this bootstrap class ml - 1 and I want to change this far icon here instead of a pencil we need for trash now let's change this click event wired up here when we click on this button we will call this function on delete order item for this function we will have two parameters first of all we have to pass the details ID which means order item ID so we can retrieve that like this item dot order item ID as a second parameter we have to pass the index of this element now let's define this function inside the typescript file here we have two parameters or the item ID which is of the type number and then we have index which is also of the type number in order to delete the corresponding draw we just need to do this inside this component we have already injected or we have the order service property service so we can do this service this dot service dot order items and we can call this splice function for our a as a first parameter to this function we have to pass the start index and we have to specify how much element do we need to remove from this array we only need to remove one element so in effect we will delete the element at this index here inside this function we have not yet you see this fourth parameter order item ID we need this information I will tell you why when we update this whole order here now let me save all of these modifications back to the application here let's add few food items in order to delete this food item from this order you can click on this trash icon here so here we have deleted corresponding food item for now I will stop this video rest of the important entity framework master detail crud operations are covered in part 2 you can see the part 2 video a link in force command and video description I have given the project github link in part 2 video description thanks for watching this whole part 1 video if you found this video helpful please thumbs up this video and for more hours and videos like this please be subscribed to this channel core affection please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 361,170

Rating: 4.933228 out of 5

Keywords: Angular 7 master detail CRUD with Web API, Angular 7 master detail CRUD example, ASP.NET Web API master detail CRUD, How to design Angular 7 Master Detail Form, Advanced master detail form in Angular, Angular CRUD with Web API, Master detail CRUD operations using Entity Framework and Web API, EF master detail crud in ASP.NET Web API, Retrieve and Display Master Detail in Angular, Angular 7 master detail table, EF master detail with foreign key, CodAffection

Id: R2dOyHJu4a8

Length: 111min 30sec (6690 seconds)

Published: Mon Dec 10 2018