Asp.Net Core Web API CRUD with Angular 16

quick demo of this video here I will Implement sb.net cover baby accurate operations with angular using LED framework core and SQL Server to insert a new record fill up this form here at last three digit security code and expiration date now submit the form so here we have successfully inserted the payment details of Eva the list of payment details is updated to fetch the newly inserted record now if you want to update a record select the corresponding item from the list then the corresponding record details will be populated inside the form let's update this card on a name then submit the form that's it you could see the newly updated value inside the list to remove an access in record click on this trash icon then confirm the operation that's it we have deleted your record from our application we have built this project from scratch step by step so that we can learn a lot and apply the same in your upcoming projects I am sure you will find this tutorial helpful so please watch till the end of the video now let's create the asp.net core web API project for that here is my visual studio 2022 now let's create a new product project so here is the project template asp.net web API you could easily find this template if you select these options from the top drop downs here now click on next in order to demonstrate the credit operations we'll be dealing with payment details of a customer so I will name this API as payment API now select the location where you want to save this project click on next so here we have the latest.net 7 framework selected since this is a demonstration project I will uncheck this option for https configuration and we'll be using the normal default API controllers instead of minimal apis and we want to enable this option for open API support this feature open API allows us to test various endpoints inside the web API using swagger UI now let's create the project so that's it so here we have the brand new asp.net core web API project now some of you might be surprised to see my solution Explorer on this left panel instead of right which is the default configuration in Visual Studio but as a fanboy of vs code editor I want to keep it on left hand side like the browser Explorer in vs code now without further Ado let's go ahead with implementing the correct operations inside the API but that first of all we need an Entity framework model so I will create a new folder called models inside that will have this model class payment detail first of all we have the primary key which is called as payment detail ID now in order to mark this property as the primary key we have to add this attribute here key now in order to add the corresponding using statement hold Ctrl then press period now select this data annotations using statement that's it now let's add rest of the properties card owner name card number expiration date and finally security code now you could see the green squiggly line here indicating non-nullable property must contain a non-null value when exiting the Constructor consider declaring the property as nullable now this warning is due to a C sharp feature called nullable now if you want to know more about nullable you can go through this msdn documentation here I have given the link in video description in brief this feature is only applicable to reference tab like string object arrays Etc that's why we are not seeing the warning for this integer property here now when this nullable feature is enabled it will try to minimize the error null reference exception now when it comes to this model class here suppose we are going to create an instance of this class like this the default value of these string properties will be null so when we refer that some go inside the application we will get this error null reference exception in order to prevent that from happening this nullable feature gives us the warning that we must initialize these properties now to resolve this problem you can disable this feature by going to project configuration here just disable this feature here that's it but I won't recommend doing it so let's enable this feature because we are ignoring the opportunity to catch possible now reference errors in advance so let's do it in the proper way for that let's initialize these properties with the default values like this now since we are creating this DB model class for a later DB migration these properties will be converted to a physical table columns and the columns corresponding to these string properties will be having the data type n walk cap Max which is more than what we need so better specify the column tag with this attribute here column let's add the corresponding using statement with the same shortcut all controls and press period now let's specify the column type here and work 100 now let's do the same for rest of the properties for card number internationally we expect 16 characters expiration date we expect this format mm YY so number of characters will be 5 and then we have security code which is corresponding to CVV or CVC so normally it would be a three character now with this model class created here let's create the DB context class as you know the DB context class will act as an intermediate in between DB model classes and the physical DB so let's create the class inside the folder models so here we go payment detail context now in order to convert this normal class into a DB context class we have to inherit this class from the parent class DB context which is from ndd framework core so let's install the required and you get packages for Entity framework core in order to install your nuget packages right click on dependencies from the solution Explorer then click on manage indicate packages inside this browse tab search for Entity framework core in here we have to install two packages first of all we have Entity framework course equal server which act as a DB provider since we are working with SQL Server database we have to install this package here SQL server and then after that we have this package Entity framework code tools which helps us in DB migration through package manager console commands which you are going to see in a bit and it also helps us in creating the API controller using scaffolding mechanism now apart from these two packages we also need this primary package Entity framework core that will be install along with this DB provider package SQL Server as a dependency so let's install these packages one by one now let's install this tools package this green tick here indicates both of these packages are installed and you could see the same packages under this dependencies packages here so these are the two packages that we have just installed and you could see the primary package inside the sequence server under this relational package here Entity framework code so these are the required and you get packages to work with Entity framework call now back to the DB context class now let's continue with the development by adding the using statement for this pattern class DB context from The Entity framework core package here now as always we need to add a Constructor for the DB context class in order to add a Constructor for an existing class you can use this snippet CT or then double tap but there is a more straightforward method right click on this context class then select this option quick actions and refactoring now select this generate option for the Constructor with this Constructor parameter that's it now we need to talk about this Constructor now before that let me add a property for this class of the type DB set for the model that we have just created here payment in detail and we'll name this property as payment details now the reason for adding this DB set property is that we are telling the DB context class that we need a physical table corresponding to this model here and also we'll be using this DB set property in order to query or modify the corresponding physical table now let's talk about this Constructor here it has a parameter of the type DB context options into it we have to pass two informations first for the DB provider whether we want to use SQL Server MySQL server Etc and then we have to pass the corresponding physical DB connection string also so that will be passed from this program.cs file here so dependency injection for now I will do the dependency injection here and later once we create a controller inside the API I will explain how it works for that we can make use of this Builder object Builder dot Services dot add DB context so basically with this injection and instance of the DB context class will be created and then it will be shared throughout the application when required that part can be discussed later once we create the controller for now let me complete this statement here so we want to create an instance of the type payment detail context and inside that we have to pass the value for the corresponding Constructor that we have here so into it we have to pass both the DB provider and the corresponding DB connection string for that here we have a Lambda expression with this options parameter so here we go options dot use SQL Server method can be called so what we are saying is that we want to use SQL Server DB for this DB context class now inside this method we have to pass the corresponding DB connection string for that first of all we'll save the connection string inside this app settings.json file like this connection strings and we will save the connection string Under this key there connection for now I will just paste the connection string template like this so first of all we have to provide the server name which is the instance name that we have provided while installing the SQL Server instance then the database name then since we are using local authentication I will set this truster connection as true and then we also need to set this key here press server certificate and finally in order to execute multiple query matches we want to set this key multiple active result sets as true now let's provide the proper SQL Server instance name which you can copy from the login window while connecting with the SQL Server instance for me I'll be using this SQL Server management Studio here so here is the server name let me copy this and I will paste that here and then we have to provide ADB name which is not created yet that will be created using DB migration in a bit since we are dealing with payment details I will name this DB as payment detail DB so that's all about connection string now let's pass the same inside this method here in order to retrieve the data from this Json file you could make use of this Builder object like this Builder dot configuration dot getconnectionstream method can be called and we just need to provide the corresponding key that we have provided which is Dev connection now we are done with the Entity framework model and the corresponding DB context class now let's go ahead with the DB migration migration is the process of creating physical DB from the model and the DB contest class that we have provided here so before doing the migration first of all try to build this project here so the build went successful if there is any error try to fix that first then go for the migration in order to do the migration select the project then go to choose then and you get package manager then package manager console for me it is already opened inside this bottom tab here package manager console now let me expand this like this now for migration the R2 commands first of all we have to execute this command add migration after that we have to provide a name for this migration so that we can refer the migration later if necessary so I will name it as Force migration hit enter now as a result of executing this add migration command here we have a new folder called migrations within that we have a c-sharp file with the same name as that of the migration here Force migration you could see the file here it consists of C sharp chords for creating the actual physical DB meaning that with the command that we have just executed there is no physical DB created inside the SQL server for that we have to execute this second command here update database and thereby this c-sharp migration file will be executed so executing this command will result in creating the actual physical DB with the given entity models hit enter so it looks like everything when successful now some of you might get an error if there is any error in the given connection string here because this is the first time we connect with the DB with the given connection string here so if there is any error in the given connection string we will see an error inside the package manager console here so don't get frightened just confirm what you have given inside the connection string first now let's check the management Studio whether we have created the actual physical DB or not let's expand this databases down here so here we have the DB payment detail DB inside this tables not you could see the table with the name payment detail which is what we have given inside this context class DB set property here so so the table corresponding to this model class payment detail will be having the name payment details now let's check the table design to know whether it is created as per the given Entity framework model here so first of all we have the primary key then card owner name card number expiration date and security code all of these properties having the same data type that we have given here and here we have the primary key payment detail ID if you expand the column properties you could see that it is set as added specification so that we don't want to insert values into it it will start from 1 and increment by 1 upon new record insertion so that's all about creating DB through migration currently this table is empty now let's check how to insert a cost into this table from our API here for that we'll be creating an API controller with necessary web methods for the create operations now from this left panel select API now select this template here API with actions using Entity framework not this read write endpoints now click on ADD now since we are creating a controller for payment detail I will select the model class as payment detail and then the DB context will be the DB context that we have created payment detail context now let's name this controller as this payment detail controller now click on ADD so here we have the controller now while creating this controller some of you might get an error saying that there was an error in running the selected code generator I have already solved this problem in one of my previous video I have given the link in video description please watch that video to fix the problem if you are getting an error like this now before getting into each of these web methods let's talk about the Constructor of this controller and how dependency injection Works inside the controller now as you can see here this payment detail controller is a normal C sharp clause which is inherited from this Base Class controller base from asp.netco as you can see here and thereby this becomes an API controller now inside this application we are not manually creating an instance of this payment detail controller Clause it will be automatically created by the framework asp.net core framework itself when we make an HTTP request into any of these web API methods in it so when I insist of this controller is create later this Constructor will be invoked and this Constructor is having a parameter of the type payment detail context as context and which is assigned to a private property of the same type payment detail context as read only now invest of the webpa methods inside this controller this private read-only property is used to interact with the DB but from where do we pass the value of this parameter payment detail context into the controller so that comes the importance of dependency injection that we have done inside this program.cs file here here and it says of this payment detail context is created by passing the values for its Constructor parameter here which are the DB provider and the corresponding DB connection string now the created instance of of the DB context will be shared among controllers having the same Constructor parameter of the same type payment detail context and then the same is assigned to this read-only property as we have mentioned before so that's how dependency injection Works in asp.net core if the concept of dependency injection is not the then we have to create instance of DB context class in each of the controllers by passing the DB provider and the DB connection string like we have done inside the program.cs file so hope you realize the convenience of using dependency injection in these situations now we'll be creating the client side of this API in angular in a bit before that we want to verify the working of this web API methods in implementing the quad operations within this web API method here and also most importantly we want to talk about the case transformation while receiving and returning data from this API for that first of all let's run this application without debugging by clicking on this icon here now what you are seeing is that a Swagger UI to test various endpoints inside our API which is added by default into the application since we have enabled open API support while creating the application so here we have the controller that we have just created payment detail and below that we could see various endpoints from the web API methods in it first of all let's execute this get web method here click on try it out then click on execute so here we got an empty array as a response because there is no record in corresponding table payment detail now let's check what's happening with this get request here so here we have made a get request to this URL now if you check the program.cs file you can see that the routing of this API is left to the controllers now if you check this payment detail controller the corresponding route is specified here API forward slash then a placeholder for the name of the controller which is in this case payment detail so that's why this URL is formed API forward slash payment detail so with this get request this get web method is involved now there is one more get web method but it accept an ID parameter here we will talk about that in a bit now first of all it is checking whether we have a corresponding table or not if it is not the F4 not for not found response will be returned we already have such a table whereby this return statement will be executed within it the DB set is converted to a corresponding list the Bible will get an array of objects in the response here now let's insert a record into this table for that we have to invoke this web API method here post okay for that we have to make the request into this endpoint post click on try it out as you can see here this web method accept a payment model instance containing the values of the new record so that's what we are passing inside the request body as a Json object we don't have to pass a value for the ID as we have already mentioned so while inserting a course into this table the value of this column will be automatically added by the SQL Server engine itself starting from one unincremented by one upon new record insertion as you can see here so let's leave that property as zero now let's provide the corresponding card owner name now as you can see inside the corresponding model we have specified the length of the card number to maximum 16 digits so I will pass the card number like this then we have expiration date in the format month then year of expiration then security code click on execute boom that's it we successfully executed the request you could see the return response body here let's check whether it is inserted to the table or not that's it now let's check how this implemented inside the post web API method here so the object that we have passed inside the request body will be binded to this property here payment detail which is the parameter of this method now before talking about this web method parameter binding let's check how this method is inserting the record now first of all like we have done inside the get work method will check whether a corresponding table is present or not it's already there so the new object instance will be added to the corresponding DB set and then we just need to invoke this method save changes from the context instance here in background Entity framework core will take care of executing the naked SQL script for inserting the corresponding object so that's how a new record is inserted through the Entity framework core and here we have the response returned with this method created at action you could see the corresponding response here having the status quo 2.1 indicating a new record is added at the server side you could see this object pass as a third parameter to this function created at action after this insert operation here The Entity framework will update the inserted values including the primary key into this object here so that's why we have the inserted object returned here now apart from this last parameter here these two parameters will form or generate a URL to retrieve the newly inserted record you could see the same URL here let me copy this and let's try to make a get request to the same URL boom now this get request is handled within this second get method here the get verb method having a parameter ID that's why this GitHub method get payment detail is passed inside this created at action so any URL to this get web method with this new ID is passed within this function inside that first of all we'll check whether we have a corresponding table or not and with this method find async the corresponding given ID record will be fetched if it is not present and not found response will be written if it is present the corresponding object will be returned that's what we have got here you could make the same get request from this Swagger UI also CVR second get request with the ID click on Try It Out Pass one click on execute that's it so that's how this post web method works now I'm not going to test the working of rest of put and delete web method will make use of them from the angular application so don't worry about that now before getting into the angular part I want to talk about The Binding of model into these methods here now some of you might have already noticed this this payment detail model properties are defined with Pascal casing but while inserting them here we are passing camel casing now if you don't know what is meant by camel casing and Pascal casing in Pascal casing each of the words in the given name here first character will be uppercased in this given name we have few words payment so its first character is uppercase then detail first character is uppercase then ID so and so but in case of camel casing all words starts with uppercasing except the first word see so that's how camel casing and Pascal casing works even though we have defined these properties using Pascal casing The Returned response from the web API converted the case Pascal casing into camel Casey so this is a common convention strictly followed by c-sharp and JavaScript developers in c-sharp properties are named using Pascal casing but bulk in case of JavaScript and JavaScript client-side applications be named properties using camel Casey now these conventions are strictly followed in both of these languages so these conversions are done by asp.net core framework Itself by default from Pascal casing to camel casing and vice versa so while retaining something it will convert the Pascal casing to camel casing and when we are passing some data we have to pass that in camel casing as we have done inside this pause web BPI method here then only it will bind to the corresponding properties Within These parameters here okay suppose we have misspelled this ID property like this then it won't bind to the corresponding web API model property payment detail within the web API here so that's one thing you should consider while passing data to the server side now before getting into angular development let me briefly explain what's happening within this food web method and delete web method we'll be making a put request to this web API method when we want to update a specific record we have to pass the ID as part of the URL like this and it will be accepted with this ID parameter and then we have to pass an instance of the payment detail with the updated values first of all it will compile the ID of the parameter with the ID within this instance here if they match each other it will go for the update operation else it will return a bad request with the status 400. in order to update an exist in the code inside the Entity framework we just need to specify the state of the record as modified and then we just need to invoke this same method save changes async so that the new changes within this pass object will be updated to the corresponding SQL Server record now in case of update operation we want to handle concurrency exception because there will be a scenario when multiple users trying to update a single record if we allow that it will affect the Integrity of the data now since we have enclosed this save changes method within a try block if multiple users are trying to update the same record it will be handled within this cache block only one of them get the chance to update the record rest of the request will be handled within this cache block so with this if loss we will check whether the record that we are looking for is already present or not using this method payment detail exist here okay if it is not present it will return a not found response otherwise it will throw an error like this now if you want to know more about concurrency exception I have given a document msdn document Link in video description you can go through that now if there is no concurrency exception it will retain a no content response indicating that they put webmaster executed successfully and finally we have the delete method so first of all it will check whether we have the table or not and then it will find the corresponding payment detail record with the given ID using this method fine async if it is not present it will return a not found response if it is present it will delete the record from the table like this first of all it will remove the specific instance of the payment detail from DB set and finally with the save changes method the record will be deleted from the corresponding table and finally here also if everything went successful and no content response will be returned like this so here we have a solid.net core web API implemented all of secret operations in it now without changing any of these web methods you could consume these web methods from our client-side angular app to implement the credit operation on client side but based on your lab requirement you might need to change here and in this web methods that I will be showing you while developing our angular application but don't worry about that if you master these Basics and fundamentals that we are discussing here you could easily do that okay now with that being said let's create our client-side app in angular now I will create the angular app inside this folder where we have already created our web API to create the angular app first therefore we have to open command prompt from this same folder directory so I will use this shortcut just replace this folder path here with CMD then hit enter so that it will open the command prompt from the same folder directory as that of this folder Now to create the angular project you can use this command NG new the name of the application Let It Be payment app now I just want to bring this into attention if you are using an old version of ankula and if you want to update it to the latest version you can execute these commands here npm commands for uninstalling the current version you can execute this command and this command will install the latest version of angular CLI now with that being said if you want to know more about this NG new command you can go to the official documentation here ankula dot IO then search here NG new so here we have the CLI command go for it inside that you could see the detailed documentation on using this command and also available arguments and options for the command now let's consider the default component app component it will be having files like one for typescript which is the original typescript file we can't ignore that then we have the HTML file for the template we can't ignore that the rest of these files uh stylesheet CSS file and the test file with the extensions pack.ts are optional for this demonstration purpose I don't need both of those files so while creating the angular app itself we can say that we don't need these component specific parts so in order to skip the component specific style sheet with the extensive CSS we can use this option here like this let me copy this and I will paste that here let me maximize this so this is the option and there is also a simple Alias here hyphen small s now like this you can skip the test file using this option here skip test you can use this option here or you can use this Alias here hyphen capital S now finally I want to use this option here skip git so that it will keep initializing the project for git repository so here we have the Alias hyphen G now hit enter would you like to add routing no which stylesheet format would you like to use I will stick with CSS currently it is installing some default npm packages into the project it may take a while based on your internet speed so please be patient finally here we have done with the app creation and installing the necessary packages into it as a result of that you could see the new folder here payment app now in order to work with this angular app we are going to use vs code editor so first of all let's navigate into the folder that we have just created now to open the same in vs code you could use this command code space spirit hit enter that's it so here we have the brand new angular app open in vs code editor now without explaining anything further let me run this application for that let's open a terminal in order to run this application you can use this command NG serve then hyphen or hit enter it will compile the project and open the same in your default web browser so this is how the brand new angular app looks like now let's check from where does this default elements are rendered so back to vs code so here we have the SRC folder most of our development will be though inside this folder and the configuration of this project angular project will be the inside this piece on angular Json file and you could see the install npm packages inside this Json file package.json now let's set what's the inside this SRC folder here we have the root index.html where we have the HTML decoration and the head and body wrapping inside the body you could see this Tag app Root which is a placeholder for the default component app component inside the app folder here so here we have the default component app component and you could see the selector Here app Root so whenever attack is created with this selector this component HTML will be replaced so so whatever is the inside this HTML will be replaced in place of this selector so this tag will be replaced with this component HTML here and this is responsible for the default view of the app now there is one important thing you should know about angular everything in it will be organized into modules by default there will be only one module which is app module you could see the corresponding typescript file here app module.ts so every component inside this module will be the inside this app folder here and you could see the module name prefixed along with these component selector Here app so this is the default module app module and you could see the same inside this main.ts file this is for every execution starts the app module is bootstrap here so that's the brief description on how an angular app works now let's start customizing the app as power equipment for that first of all I want to show you the structure of the app that we want to build for that I'm going to create a new text file here called app structure now let me paste this structure here now as I already mentioned we'll be implementing required operations using payment details of customers so here we have the corresponding components payment details which is the parent component and here we have the child component payment detail form just to design the form for the entity payment detail already existing payment details will be listed inside this parent component here and we'll be creating an additional folder called shared within that we need to create a service file and a model file for the NDT payment detail now that's all about the app folder now we'll be designing this application using bootstrap and phone over some icons so both of the CDN reference will be added to the root index.html here along with that you could see this star store CSS which is the global style sheet for this angular application inside that will be adding Global CSS rules now let's make these changes inside the application that first of all I will switch into the Z mode so go to view then appearances then Zen mode or you can use this shortcut all Ctrl then press K release both of them then press EZ I really like this Zen mode because it reduces a lot of distractions inside the IDE and also makes us more focused on the project now if you want to see the file explorer you can do this just grab it like this or you can use the shortcut Ctrl B now in order to navigate in between open files you can use the shortcut hold Ctrl then press tab like this this way you can navigate open files inside the ID now if you want to search and open any of the files inside the project you can use this shortcut hold Ctrl then press p and search for the file like this hit enter that's it now to switch back to the recent file use the shortcut control tab like this always if you press the control tab the recently viewed file will be opened okay now in order to toggle the visibility of menu items press alt so that you can see all of the menu items like this now let's start creating these components here so I will open the terminal like this currently there is only one tab inside that we are running this angular app now in order to create these components here we have to execute some angular CLI commands so I'm gonna open one more tab like this now in order to hide this long path directory I'm going to execute this command prompt then dollar G this will only work if the terminal is opened in command prompt if the tab is open in Powershell we can go to this drop down here then click on command prompt like this and thereby a new tab will be opened in command prompt like this okay now hit enter so the entire path directory is hidden and only a simple like this will be shown now let's clear the terminal like this first of all let's create this pattern component here payment details for that we can make use of angular CLI generate command so here is the search result from CLI and into cvng generate here this generate command can create a lot of files inside the angular app so here is the documentation on creating a component so here's the command NG generate component the name of the component so here we go NG G4 generate C4 component can be used in short the name of the component that I will copy paste from here hit enter that's it so here we have the new component payment details inside that we have an HTML file and a corresponding typescript file also apart from creating these two files you could see an update inside this app module.ts file inside that we have just added the newly created component inside this declarations array like this so this will be automatically done by the angular CLI itself with this command execution here now let's create this child component for that I can navigate the previously executed command with this upward Arrow like this since we want to create this component inside this pattern component folder here I will do this for Slash the name of the component hit enter so here we have the new component folder which is that you could see the corresponding component HTML and typescript file normally when you execute a component creation command like this for a single component there will be four files created but while creating the angular app itself we have specified that we don't want to create the component specific start sheet or test file so that will be saved inside this angular.json file here so you could see the schema updated here to skip component specific style sheet and test files the same options that we have used while creating the angular app is also present at this component creation command level also see so you can use these options to a specific component generation command also now let's create this service and model class for payment detail for that let me clear this terminal in order to create a service class you can use this same generate command you could see the corresponding command here under services so here's the command NG generate service now here is the service file that we are going to create so here we go NG generate S4 service the name of the service that I will copy paste from here now since we want to create this service class inside the shared folder we have to specify it like this shared forward slash the name of the service Clause even for a service class there will be a test file we have ignored that with the option that we have used while creating the angular app and thereby you could see this schema updated for the service class here see the test file will be skipped now hit enter so here we have the service file created inside the shared folder now let's create this model class unfortunately there is no CLI command for creating a model class so we'll be using this class creation command with some tweaks so here is the command and you could see the corresponding short version here now in order to create the model class I will be using the service class creation command and let's modify it accordingly instead of a service Clause we want to create a class file in short CL now if we execute this this will create a file with the extension TS but it is recommended to have this extension model.ts for modern class files so we can make use of this option here type so this is how it can be done type is equal to model hit enter so here we have the model class created with the extension model.ts now let's hide this terminal so far we have created everything that we want to add into this app folder now I'll be designing this app using bootstrap along with phone awesome icons so let me add the corresponding CDN reference into index.html so go to the official bootstrap website getbootstrap.com inside the home page itself you could see the CDN reference for the start sheet here let me copy this and let's paste that inside this index.html inside this head tag here now let's grab the CDN reference for phone over some icons most often I will copy the CD interference from this website cdnjs.com I will copy the reference for this all.min.css and let's paste that just below this bootstrap reference now we only need to add some stats into this Global style sheet here that we can add later now let's start designing the app from this index.html itself now inside this body we could see the app selector for the default app component here as already mentioned it will be replaced with the HTML from this app component here now in angular 16 instead of providing component tags like this we can use self enclosing tags like this so this is added to the latest angular 16 and this is only available for custom components that we create meaning it's not applicable to default HTML components like this div here it's not allowed to add a div with the self enclosing tag like this so hope you understood now let's move to the default app component HTML so this whole HTML elements is responsible for the default view of the application here we don't need them so let's get it off them now let's start with Adam bootstrap container class and I will be using miwiations like this for adding HTML elements so this will add a div with the class container okay now let's hit tab so here we have the div with the class container from bootstrap inside that we'll be adding a bootstrap grid system so first of all we need a div with the class row immediately inside that we need another div with the class called a so this column will take 8 columns out of 12 and in order to Center this same we will apply offset off to two columns from both of the sides now hit tab so here we have the parent div and inside that we have the grid column hope you understood how mlw Visions works trust me it will help you a lot in designing the app now inside this div we want to show the pattern component here payment details so here is the corresponding selector let me copy this now let's switch back to the previous tab so you can use the shortcut control tab that's it now let's add a self enclosing tag with this selector that's it now you see we are showing the default text from the component that you can see inside the HTML part of the parent component here now let's place this pattern component into two equal halves so that we can show the form from the child component on one side and in the other half we can list accessing records for that we can use bootstrap grid system like this edit with the class row and in order to apply margin from the top of the range 5 we can add this class and inside that we need div with the class all six and we need two divs like this so multiply by two now hit tab boom now inside this First Column we'll be showing this child component here so let me copy the corresponding selector now switch back to the recent tab using the shortcut control tab from now onwards I won't be repeating the same shortcut again so remember the shortcut Ctrl tab to switch back to the recently working tab okay now let's add the component selector here now inside the second half we list accessing payment details so here we go now while verifying the working of this.net core API we have inserted error code into the table payment details as you can see so next we'll be listing such existence records inside the second half here before that I just want to add an app header about this bootstrap grid so first of all we need a div apply this background color from bootstrap body secondary in order to align the text in Center we can add this class in order to apply vertical padding of the range 5 we can have this and finally in order to Round the Corner this class can be applied rounded off to range 2. hit tab so here we have the div created with mentioned classes now inside that we need an H1 header with the class display 6 and in order to apply extra thickness let's add this bold class inside that we will have the app header like this payment detail register so here we have the app header okay now it's time to retrieve and display excision records from asp.net core web API into this angular app here for that we have to make a get request into this running instance of asp.net core web API that can be done inside this angular service class payment detail here in order to make an HTTP request from angular app will make use of HTTP client from ankula so here is the corresponding import statement angular forward slash common forward slash HTTP from that we want to import this HTTP client now let's inject an instance of the same inside this Constructor like this private HTTP of the type HTTP client now in order to make use of this HTTP client we have to add the corresponding module into app module.ts file here we just need to add the corresponding module into this Imports array so HTTP line module for HTTP client classes the ID is not providing the auto suggestion so we have to add the corresponding import statement actually there is a work around to fix the problem but it only works sometimes so I'm not going to get into that so let's add the import statement manually like this and from that we want to import this HTTP module that's it now back to the service class now in order to make the get request I will add this function refresh list now we can make the get request like this HTTP dot get method can be called inside that we have to pass the URL of the API instead of hardcoding the variable inside this service class I'll be using environments configuration files currently inside this app we don't have the environments folder added by default we can create the folder with the CLI and g generate command so here is the command for creating the environments folder let me copy this now let's execute that inside the terminal so here we have the new folder with these two files environment.development.ts and environment.ts inside these parts we'll be saving the configuration data for the app this development file will be used while we are in development stage once we publish the app in a server this environment.ts file will be used when and which file is to be used is specified inside this angular.json file here that's why when we executed this command here this angular.json file is updated if you check the Same by default when the application is published this file will be used and when we are in development meaning we are currently in development stage so this path will be used instead of this path now we can check whether we are in production stage or development stage inside this serve here this is the command that we use while running the app like NG cell right so you could see the default configuration here development okay so this file will be used for demo development and this file will be used for production now let me copy the base URL of the API and let's save it here API base URL since we want to append the API part in all of the URLs I will append the same here also okay now let's copy paste the same inside this production file also now let's check how to access these values from our service file here I will add this URL property here which is of the type string now let's retrieve the base URL from the environment file so I'll be using this import statement here this one okay so which is just saying that inside the SRC folder we have this folder environments and we are only specifying environment based on whether we are in development stage or production stage angular determines which file to be used so we don't need to worry about that now we can retrieve the value here API base URL into that we have to concat the rest of the URL which you can see here payment detail in order to avoid the typo I will just copy that from here now let's pass the same into this get web method URL now this get verb method will return an observer which you can see here now we can subscribe to it like this subscribe inside that we will have this object in order to handle this access response we can have this next callback and we can also have the error call back here for now we'll just print the error object now inside the success response for now let's print The Returned response object so this will make a get request to the running instance of web API to retrieve the existing payment details now we'll invoke this method from the parent component here because we want to list them inside the parent component the form will be rendered from the child component we don't have to worry about that now for now let's retrieve and display the records inside the second half here now in order to invoke this service class method from this parent component we have to inject the service class inside this component here so first of all we'll have this Constructor then let's inject the service class here payment details service now we have to invoke the service method once this component is fully loaded for that we can make use of the corresponding lifecycle hook so first of all let's import this interface on init just place the cursor on the component and then click on Quick Fix and then click on Implement interface on image so here it is now from this method we can call this service method like this service dot refresh list so this method will get invoked once this component is fully loaded okay now let's try whether the return response is printed into the console tab or not let's reload the app let's open the developer console we got an error from the API saying that this request from this angular has been blocked by course policy I already knew this is going to happen I just want to make you understand that it is okay to get errors while developing an application it is very common that's how we developers learn new things especially in today's world we developers are the only people who face failures on a day-to-day task and we always find a workaround to fix the problem so don't worry first of all we should know what is meant by course policy this course is an abbreviation for cross origin resource sharing and it's a security feature that you could see in all of your BPI and what it says that when an application tried to consume this web API which is hosted in a different domain or different port number it will block the request even though both of these web API and angular app is having the same domain which is localhost their port numbers are different so this web API blocks the request from this angular app here now in order to consume this web API from this angular app we have to change the configuration of this web API to allow a request from this angular app or its URL but that back to visual studio where we have already opened our web API now inside this program.cs file we can configure the course policy app dot use course method can be called now the placement of this method invocation statement is important make sure that it is placed in between this use authorization and this if close here okay now let's configure it accordingly using this Lambda expression options dot with Origins can be called inside that where you specify the URL of this angular app here and thereby it will allow the request from the angular app now make sure to remove the forward slash at the end now in order to allow any type of method whether it is get put post or delete we have to invoke this method and in order to allow any because header configurations we can call this method now this web API is already running here in order to reflect the new changes let's save this then build the project okay that's it once the build is successful new changes will be reflected inside the running instance now let's reload the app again boom that's it so here we have an array of objects returned from the web API now we want to render the same inside this second half here for that first of all we have to save The Returned array of objects inside a variable and we'll be saving such properties inside this service cross so that we can share them across these parent component and child component here now to save the list of payment details let's define this model here payment detail now actually we are going to define a model class corresponding to this C sharp class here now you should remember what we have discussed about case conversion when data is returned from web API the Pascal casing is converted to camel casing as you can see in this return array of objects the exact opposite will happen when we send data from our angular app to this web API here that is this camel casing will be converted to corresponding Pascal easy now let me tell you why I emphasized this conversion again and again let's define a corresponding property to the c-sharp property inside our model angular model here it would be payment detail ID which is of the type number and I will initialize that with zero currently angular is running on strict mode so when we Define or declare a variable we must initialize them now let's talk about this property here this property is the exact camera casing of this c-sharp property here see the first word first character is lowercase now suppose while naming this property you made a typo like this ID in all uppercase here is the problem when we submit data to the web API using an instance of this model it won't bind to the corresponding Pascal casing of the property inside our web API here for example inside this controller we have this post method and it is having a parameter of this model payment detail this camel case property will not bind to this C sharp property here because once this property is converted to Pascal casing it would be like this the ID will be still in uppercase and it won't bind to this property there by the data that you have passed to this web API won't be processed as you expected so make sure to name them properly and I will give you a small tip here you could either copy the object like this and pasting them inside the model here and make the modifications accordingly or you could copy the object from this Swagger you are here see inside this post will be image that just copy this and pasting them inside this angular app model okay now first of all we have to get rid of these double chords so we can make use of DBS course shortcut for multiple selection so first of all I will select the first double chords here now use the shortcut hold Ctrl D to select the same occurs in rest of the codes so keep hitting Ctrl D so that it will select all of the occurrence of double quotes like this or you can do the same with one shortcut just select the double quotes like this and use the shortcut Ctrl shift L then just hit backspace so that we have get it off the double quotes inside the copied object now if you want to know such helpful vs shortcuts I have given the references in video description now here we already have the type of these string properties now let's specify the same for this primary key which is number now let's initialize that with the default value zero now we have to get rid of this comma at the end and we have to initialize these string properties with an empty string like we have initialized this number property here so what I will do is I will remove this first comma here this property is already set now in order to initialize all of these properties all at once I will add the comma here and then I will use the shortcut first of all I will select this first comma and I will use the shortcut hold Ctrl then shift l so all of these commas is selected now we can initialize all of these properties all at once so hope you can understand how much vs vs core shortcuts or smart decisions or moves like this help you to save a lot of time in the development process so here we have the angular model created corresponding to the c-sharp model here now back to service class now I will define an array list which is of the type payment detail so here we have the import statement of the model class from this file here so this is an array of the model class and I will initialize that with an empty array here now within this success response I will assign this response which is this array of objects into the new array that we have created so here we go list is equal to response now we have to convert this into an array of payment detail now let's show the same inside this parent component here so here is the parent component HTML normally I render the array of objects inside an HTML table but this time I'll be using bootstrap unordered list first of all we need this another list from boot shop having this class list group and we need an immediate Allied child for the same we will be iterating the array over this Li element here so here we have the ng4 directory ng4 now the list of payment details is still inside this service class we have already injected the service Clause inside the component here parent component here so we can iterate through the array like this let PD in short for payment detail of service dot list so this is the RF from the service class now this array of list is of the type payment detail model clause and it is having these much properties now for now I will just show the order name like this PD Dot card owner name let me save this and then back to the app boom that's it so here we are properly rendering the list of payment details that we have retrieved from the web API now let's customize the appearance of this list here with that into this Ally element I will be applying these bootstrap classes list group item in order to set the display into Flex I will apply this class now in order to distribute the elements evenly on horizontal axis justify content between now in order to start aligning items from start I will add this class align items start now we'll add a bottom margin of the range 2 then we need border horizontal padding of the range for vertical padding of the range 3 and we want to make the corners rounded off the range three so this is how it looks now now let's show rest of the details with that first of all I'll be adding this div having this bold plus we want two divs like this so here we go apart from this we need to show card number and the expiration date card number then expiration date first of all we'll be having the card owner name and after that we'll be having a div for the card number then expiration date inside this last div so this is how it looks now along with these details I want to show a button for the delete operation for that I will be wrapping these card details inside a pattern div like this for that you just need to select these three divs that we want to wrap with another div then use the shortcut Ctrl shift p then search for wrap with abbreviations select that then type div now as you type the abbreviation this selection will be wrapped with the same now finally you must hit enter apart from this I will be adding a span like this inside that will be showing a phone or some icon for the delete operation now let's search for an appropriate phone or some icon so go to the official website here phone amazon.com and click on icons and search for trash bin let's filter the free icons now I'll be using this icon here now click on this HTML tag to copy the same then back to the app and just paste it over here so here it is now in order to expand this div to the available space I'll be applying this bootstrap cross Flex grow one and then I will be applying this custom class Mouse hover which I'll be adding inside the global style sheet in a bit now I want to change the color of this delete icon text secondary and to enlarge this for Icon we can use this for LG class and in order to change the cursor when we hover the item we can have this custom class Mouse hover the same is applied here now let's add this custom class inside the global style sheet stars.css so this is how it looks now inside this pattern component we'll be listing the accessing payment details records like this now let's design an angular form inside this style component so that we can submit the form data for inserting a new payment detailer code inside the web API so head over to the child component payment detail form which we are already showing inside the pattern component first half here okay so head over to the child component now in order to design the form I will be adding a property of the type model class inside this service class here so here we go form data which is of the type payment detail model class and we will initialize it like this new payment detail now we'll make use of this property in order to design the form so we have to inject the service class inside this form component like we have done inside this pattern component here so let me copy paste this Constructor into this form component here now in order to add the import statement for the service class paste the cursor at the end of the service class here then use the shortcut Ctrl then base so here we have the corresponding impulse statement now let's design the form using the service Class Property form data of the type payment detail model so back to the form component HTML first of all we need a form element we don't need this action attribute now all the HTML elements for a specific property inside the model will be grouped inside a div like this div having the class MB hyphen 3 meaning water margin of the range 3. inside that first of all we need a label and along with that we need an HTML input element like this by default the type of input control will be text so we don't need this type attribute here first of all let's add the input controls for this model property card or name so let me copy this inside this label will show card owner name and we want to apply these bootstrap classes form control and in order to make the control a little bit larger you can add this extra class form control LG then after that here we have the placeholder name on card now we are going to bind this input control to the service Class Property here form data so each of the input control will be binded to the properties inside this model class here card owner card number Etc inside this service class this form data property is already initialized with the default value of the model which you can see here all of the string properties are initialized with empty string and this ID property is initialized with 0 row now we need to bind this card on and name to the corresponding input control here we'll do that using two-way data binding in angular for that first of all we need to assign a local reference like this card on a name into that we will assign this NG model now this is how we Define the two-way data binding first of all we need this syntax like a banana inside a square bracket now inside the pattern this is we have NG model now here we have to specify the corresponding property from the injector service so here we go service this is how we have injected the service class into the component then inside that we have form data inside that we have this property called owner name now while doing this binding we must assign the name attribute here as card owner name now in order to work this two-way data binding we must import the corresponding module forms module into this app module.ts file so here we go forms module now let's save this and back to the app see here we have the label input pair for the property card owner name now in order to start the form elements let's add few CSS rows into the global start sheet styles.css fine now while making changes inside the application sometimes the running instance of the app might be crash if that happens you could see the detailed info inside the terminal where we are running the angular app now if you think there is no error inside the developed app and still you are getting an error inside the terminal better restart the server that might resolve the problem in order to restart this server first of all use the shortcut Ctrl C to stop the running instance then re-execute the NG serve command now let's add input controls corresponding to these three properties here so I will copy paste this div three times first of all we have card number placeholder will be 16 digit card number now let's update the rest of the properties accordingly for that first of all I will select this local reference the same is used inside this name attribute and inside this two-way data binding here also so I will use this shortcut Ctrl D to highlight the same and I will paste the card number like this then we have security code placeholder will be CVV in some countries it will be referred as CVC now let's update this attribute like we have done before now we want to show the tab character inside this input controls as dots for that you can set this attribute type as password now finally we have expiration date I will specify the placeholder as the format that we are expecting for this control now let's update these attributes all at once let's save this and back to the app so here we have rendered all of the form controls for the visible properties inside the model finally we have to add the input hidden field for this ID property because when we submit the form if we want to retrieve the value of the ID property we must have a corresponding input control inside the form so here we go input of the type hidden name will be payment detail ID will assign the value like this using the attribute value of the input control directly service dot form data payment detail ID now finally we need to add a submit button for the form so at the end of the form we'll have this div we want to apply the display of the type grid inside that we need a button having these bootstrap classes BTN then vtn LG to make the button larger and we'll apply the color with BTN success class now let's set the type of the button as submit inside the button we will be having this text submit boom so here we have competed with the form design now finally I have a small requirement to show both of these security code and expiration date in a single row now let's move these divs for security code and expiration date into it now finally for both of these divs we want to apply the bootstrap cross 6 to divide the raw into two equal halves with that I will be using the vscore shortcut multiple cursor that will be like this first of all I will paste the cursor over here and at the same time I want to add one more cursor here inside the first div here for that hold alt then then click here that's it so whatever we type it will be appended in both of these places that's it now let's submit this form so that we can insert a new record into the accessing list of payment details meaning we are going to insert a new record into the SQL Server table through the.net go API post web method here for that first of all let's wire up a function to this form submit event so here we have this submit event we'll handle that inside this method on submit into the same method we'll be passing a local reference of this form like this form is equal to ng4 now we can retrieve the data of the form controls within this form using this local reference here 4. so we'll pass that to the on submit method now let's define this method inside the typescript component here this method has a parameter of the type NG form the shortcut control space is not helping to add the corresponding import statement so I will add it manually here import from angular forms we want to import ng4 in order to insert a new record having values from these input controls we have to make a post request to this web API here for that inside this service class I will be defining a new method post payment detail now in order to make a post request we can make use of this HTTP client object HTTP here so this dot http.os method can be called as a first parameter we have to pass the URL of the post request it will be similar to the get request which you can see here the URL of this get request and this post request is same so we just need to do this this dot URL which we have already generated up here now as a second parameter we have to pass an object containing the values of the new record like we have passed inside this Swagger UI OS request body with that we can directly pass this form data object here because we have designed the form using the same property using two-way data binding so whatever changes we made or use some mix inside the input controls the same changes will be reflected inside the corresponding service form data properties here so the current value of the form data represent the value of the object which is to be inserted so here we go form data now this post request returns an observer now from this method we'll return the Observer like this now let's call the method inside this form submit event service dot post payment detail it returns an observer now let's subscribe to that here subscribe into that will pass an object having this success and error callback for now inside this success callback let's print this response into the server concern now let's check how it works first of all let me open the developer console now let's insert a random record now we have to make sure that the card number must not exceed 16 characters so I will copy the car number from the existing record here and let's change the first number if the card number X is 16 characters there will be an error inside the server API don't worry about that we'll implement the validation in a bit now let's provide the security code it must not exceed three digits then expiration date month and year here also maximum we can have five characters now let's submit the form boom so here we got the response looks like everything went successful let's check whether the record is inserted into the table or not that's it so here we have successfully inserted the record by making the post request here this post request will consume the post request inside this.net core API here we have already discussed what's going on inside the webmaster before now in order to refresh the list on the right hand side to include the newly inserted record we have to make one more get request like we have done inside the pattern component NG audit lifecycle hook here inside that we have called this refresh list from that we have made a get request to retrieve all of the accessing records from the table so here is the corresponding get web method now in order to avoid making an extra get request for updating the list here I'm gonna update the post request response as you can see here currently the post request written the newly inserted object instead of that I will return the entire list of payment details from the table here so the that we can avoid the extra get request to update the list here it's completely up to you how to retain the response from these web methods if you are concerned about a delay response due to the externality operation or you want to follow the solid state principle you can keep these web methods as it is then you have to make a separate get request to refresh the accessing list of Records so here we go instead of this created at action method I will call this method okay meaning everything when successful inside the post request now we just need to copy paste this Entity framework called statement to retrieve all of the accession records from this get web method now I want to do the same for the update and delete operation because after both of these update and delete operation also we want to refresh the list so I will return the entire list of payment details after update and delete operation now let me save this in order to reflect these new changes inside the running instance of the.net core API we just need to build the project here now in order to refresh this list after the post request we just need to update this success callback like this this dot service dot list this list property is used to render items inside the parent component so by updating the array here the render list will be updated so here we go response so the ndr of payment details is assigned to the list now we just need to convert into an array of payment detail model now the app is already reloaded while we are making the changes inside the app and thereby the list of payment details is refreshed here now after any successful operation inside the form we want to reset the form for that I will Define mf3 inside this service class reset 4 with a single parameter form of the type ng4 now let's add the import statement like we have added inside this form component here you know I'd already said before first of all we have to call the reset method from this NG form object so here we go form side that we have another object with the same name form and from that we just need to call this method reset since we have designed the form using this service property form data we have to reset that also this dot form data is equal to new payment detail model instance now let's call this same inside this success callback here service dot reset form and let's pass the form object now let's implement the form validation before that I want to show a notification after any of the success operations saying the operation is successful for that I'm going to make use of the npm package in DX toaster have used the same in previous angular project here is the package ngx toaster now before installing this notification package make sure to check these dependencies here based on the version of angular you are using you have to install the corresponding ngx toaster version mentioned inside this table you could see the version of angular you are using inside the project from this package.json file here so here's the angular core package and you could see the current version you are using since we are using the latest and class 16 we can go with the latest version of the package so I will copy this installation command now inside a new terminal I will paste the copied npm command hit enter once the installation is successful let's hide the terminal back to app module.ts file there are few initial configurations to be done inside the app module.tls file as you can see here this is a dependency package for this ngx toaster it's been there in ankula by default you could check that inside the uh package.json file here so it is already installed so we don't have to install it separately now we have to make some initial configurations for the package so here is the first step where we have to add the style sheet of the package into the angular.json file so here is the path let me copy this open angular.json file we need to add this path into the array Stars so I will search the same here Styles as you can see there are two arrays with the same name Stars so here's the first one now let's add the same path into the second array also now here's the final configuration open app module.ts file and then add these modules into it so here we have the app module.ts file let me copy this and pasting here now let's copy the corresponding import statements also now let's make use of this package inside the form component here we want to show a successful notification after this operation here for that first of all we have to inject the toaster service here so toaster of the type toss dot service class the toaster service must be imported from ngx toaster so let's correct it here now let's show a notification after the insert operation here tossed dot success method can be called as a first parameter we have the message of the notification which is inserted successfully as a second parameter we have to pass the title of the notification I will pass it as the name of the app which is payment detail register now let's check whether it works or not for that first of all we have to restart the application because we have made changes outside this SRC folder which is inside this angular.json file so whenever we make changes outside the SRC folder it's better to restart the server so let me open the terminal where we are running the server to stop the execution use the shortcut Ctrl C and then re-execute the command in G itself all let's insert a new record submit the form boom that's it so here we have the notification saying the operation when successful and here you could see the newly inserted record now finally we have to implement update and delete operation before that let me show you how to validate an angular form like this inside this form we want to make all of these input Fields as required or mandatory to submit the form now we can specify the validation rules directly inside the form HTML elements here in order to make this text field for card or name as required we just need to add the attribute required like this we want the same required variation for rest of the form controls so I will copy paste that here now we want to limit the number of characters entered into these text boxes here for card number it would be 16 characters that of security code will be 3 and file inside the expiration date we only allow 5 characters so first of all we have card number to set the character length we can use these attributes Mill length as 16 then we have max length so both of them is assigned with 16 so we must provide an input having 16 characters now let me copy paste this for rest of the input controls for security code we need three characters and that of expiration date is 5. now we have to highlight invalid form controls and also we have to restrict this form from submitting when this form as a whole is invalid in order to know whether this form as a whole is valid or invalid we can make use of this local reference of the form here that is inside this on submit event we'll only make this post request when this form as a whole is valid for that we can add this if close inside this form object there is a Boolean property valid indicating whether the form as a whole is valid or not so we'll only make the post request if the form as a whole is valid now let me move this post request into the if Clause that's it now let's highlight invalid input controls inside this angular 4. for that we can make use of NG classes provided by angular itself for example let's inspect this card on a name here you could see the NG class NG invalid indicating the control is invalid for this input control or the validation rule says it must be required or mandatory before submitting the form now whenever I start typing inside this control you could see that the NG invalid class is replaced with NG valid meaning the control is valid now similarly you could see the same NG classes applied to rest of the input controls to indicate whether the control is valid or invalid So based on the absence and presence of this class NG valid or NG invalid I will highlight the invalid form controls for that I will add a custom CSS role into the global style sheet here in solve with form if there is an input element having the Clause NG invalid we will change its border column see by default all of the input controls are invalid so you could see a red border around them instead of this I only want to show this validation error indications once user submit an invalid form now to know whether this form is already submitted or not I'm gonna add a new Boolean property into this service class which is form submitted which is of the type Boolean and we'll initialize that with false now we'll set this property with true once we submit the form inside this form component so here we go service dot form submitter is equal to true so inside the form submit event we have set the property now from this property we could say whether the form is already submitted or not now I want to reset the same property inside this reset for method form submitted is equal to false now in order to know the value of this Boolean property inside the HTML I'm going to assign a custom class to this form here so this is how we can apply a class based on a condition class dot we want to apply this class custom class submitted when the property service dot form submitted is true okay so when this property is true this class submitted will be applied to this form element okay and also I have forgot something I want to remove the default HTML validation so I will save this no validate and also if you don't want to short this autofill with previously posted data we can reset this property autocomplete as off now back to validation based on the value of this property the plus submitter will be applied or added to the form element now we can change this style here when a form having this class submitter contains an invalid input control then we will show the red border let me save this activate the app so initially we have a fresh form let me submit the form now we got the error indication now once we populate this form with valid data the error indications will be gone see so this is how we can Implement validation in angular 4. next we are going to talk about update operation for that you still want to click on this list item here then the corresponding record DTS will be populated inside the form and then he can make the required changes once user submit the form the new changes will be updated inside the DB and the updated list of requests will be refreshed so first of all let me add a click even for the list item here so here we have the parent component where we have the list of payment details now I'm gonna add the click event to this div here so here we go we'll handle that inside the method populate 4. into the method we will be passing the record corresponding object for the record so that will be this variable here of property PD short for payment detail now let's define this method inside the parent component it has a single parameter selected record which is of the type payment detail model inside that we have already injected service into this pattern component now we just need to update this property to populate the corresponding record inside the form here because we have designed the form using this service property form data so here we go service dot form data is equal to selected record now once we select a record we corresponding record is populated inside the form but there is a problem when we make changes in service form the same changes could be seen inside the corresponding list item here because this object is directly assigned to this property so they share the object reference instead of that we will copy the object and then we will assign to this property and thereby we could avoid this problem because user might think these changes is already done inside the server side also but actually we are only changing the service property from data so in order to avoid this confusion you will make a copy of this object and then we'll assign to this form data for that we could do this object dot assign method can be called as a first parameter will pass an empty object and we can pass the second parameter as selector record so a copy of this object will be created and then that will be assigned to this form data now the problem will be solved see so that's all about selecting error code for update operation now once the user submit this form with updated values we want to update the record with new values but inside this form submit event we have already implemented the insert operation by invoking the post web API method but here is the catch based on the value of this primary key property payment detail ID we could say whether we have an insert or update operation by default the value of this up property payment detail ID is zero so if this ID property is having the value 0 and we have a fresh form meaning we have an insert operation if it is a non-zero value in case of this uh form here then we have an update operation So based on the value of primary key we could say whether we have an insert or update operation so this is what I will do I will create a separate method called insert record having the same parameter form let me copy this and pasting here now I like this we need one more method for update operation we have already implemented the insert operation here so let me move this same into this insert method now we just need to invoke them based on the value of the primary key if it is equal to 0 then we have an insert operation so I will invoke the method insert record here by passing the form object else we have an update operation now for this update operation first for inside the service class we have to make the put request that I'm going to create another method so let me copy paste this post method this will be Port payment detail here we have to make a put request into this web API method here so along with the URL we have to append the ID of the record let me append the ID here so as a first parameter we have the URL and then as the second parameter we have the form data it contains the updated value of the record so this will make a put request to the corresponding web API method and thereby the record will be updated with the new values now let's invoke the same inside the form component here it will be almost similar to invoking this post method here so I will copy paste that here that's in volume a third put payment detail report webmaster also Returns the updated list of Records will assign the same array into the list and thereby the list of Records will be refreshed to reset the form and will show the toaster notification with a different background color blue color so we'll invoke this method info and the message will be updated successfully now let's check whether it works or not let me update this record for August I'll change the name in order to make sure the update operation is working in all of the fields I will append this uh 30 in all of these fields at the end 30 and 30. now before submitting the form let me show you the current value inside the DB so these are the current value of the record now let's submit the form for the update operation boom so here we have the success message and you could see the changes inside this list already let's pre-execute the select query that's it now finally we have to implement this delete operation for that we can add a click event to this trash icon here so open the parent component HTML here we have the Fab icon let me add a click even here will handle the event inside Mr called on delete into that we just need to pass the ID of the record so payment detail dot payment detail ID now let's define the method here we have a single parameter ID of the type number in order to remove error code we have to make a delete request to this web API method here so first of all I will Define a service method to make the request for that let me copy paste this method the name of the method will be delete payment detail having the parameter ID of the type number in order to make the delete request we just need to pass the URL appending with the ID lag we have done for the update operation nothing else so we can pass the URL like this ID parameter is appended at the end of the request instead of put we have to call the delete method here now let's call this same method inside the component typescript file here service dot delete payment detail into it we just need to pass the ID now we just need to subscribe to it so I will copy that from the form component here now the entire subscribe method invocation is copied let's paste it over here and let's make the required changes inside this success callback the return response will contain the new list of payment details we have assigned the same to the array list let's get rid of this we don't need to reset the form for delete operation now in order to pop up a notification message using toaster first of all we have to inject the same into the component so I will copy paste the injection from this component now let's add the corresponding import statement make sure that it is importing from ngx toaster now you want to show the notification in red color so I will call this error method and the message will be deleted successfully now before trying this delete operation we want to confirm the operation from user side because delete is a loss of data so I will add this if close here if and we want to show a confirmation dialog from a client side using this JavaScript method confirm inside that we'll ask this question are you sure to delete this record now the delayed operation will only happen once you confirm the operation currently you could see these are the three payment details record now I want to delete this record for Daniel so click on the stash icon and here we have the confirmation asking are you sure to delete this record click on OK then it will delete the same boom that's it so that's it guys here we have implemented the credit operations insert update and delete with angular and asp.net core web API you can download or clone this project from the GitHub repository I have given the link in video description for more awesome videos like this please consider subscribing to this channel if you haven't yet please like and share this video with your friends and colleagues so that they can also benefit from this have a nice day bye

Channel: CodAffection

Views: 38,916

Keywords: Asp.Net Core Web API CRUD Operations, How to build Web API with Asp.Net Core, Asp.Net Core Web API CRUD using Angular 16, Angular 16 CRUD with Asp.Net Core 7, Asp.Net Core Web API CRUD with Entity Framework Core and SQL Server, .Net Core 7 EF Core CRUD using Code First, Asp.Net Core Web API tutorial with Angular, Angular 16 with .Net Core Web API, Enable CORS in Asp.Net Core Web App, Insert Update and Delete in .Net Core Web API, Asp.Net CRUD with latest Angular Angular 16

Id: OZGdKYzUYvU

Length: 95min 57sec (5757 seconds)

Published: Mon Jul 31 2023