Angular 4 CRUD With Web API

kick demo of this angular 4 tutorial this is a step-by-step tutorial on how to implement crude operations in angular for application using asp.net web api this is the final output of this tutorial here we have implemented crude operations based on some employee details like first name last name position employee code and office in order to insert a new employee record you can do this now click on submit here you can see the notification message your a code added successfully here you can see the newly added record for James Thomas in order to update an employer record you can click on this pencil button here then it will populate the corresponding employ details inside this form now I want to edit the employee name instead of James Thomas I want James John's employ code will be JJ now click on submit so here we have updated the record here you can see the updated embroil is if you want to delete a record you can click on this trash icon here then it will ask for confirmation are you sure to delete this record click on ok so here we have deleted the record successfully I am sure you will find this tutorial helpful for your upcoming and will have for projects so please watch till the end of this video tutorial what's up YouTube welcome to dotnet MO in this tutorial I am going to show you how to implement CUDA operations in angular for application with the help of AB API project and SQL Server before starting this video tutorial 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 subscribe to this channel dotnet mob in order to implement crude operations like insert update and delete we have to create SP dotnet Web API project for that click on new project here then select work under wishes C sharp then select asp.net web application name your project here I will name it as Web API then select the location where you want to save this application then click on OK select web api keep other options as it is click on OK so here we have a brand new asp.net Web API project before continue with this project we have to create SQL Server database for this application for that let me open my management studio here let me create a new database for the right click on databases then click on new database I will name this database as Web API be click on okay so here we have the newly created database inside that I am going to add a new tablet for that right-click on tables then new tablet we will be doing all these good operations on employee details such as employee ID first name last name employee code position and office so I am going to create a new table to store all these employee details first column will be employee ID its softly type integer then first name as 450 then last name as Walker 50 employee code EMP code as walk 50 then position as Walker 50 and office it's off the type orcam 50 now I will set this somebody ID as the primary key for this table I want to set the same column as the identity specification for this table for that select the column and then go to column properties then expand this identity specification said this is identity as yes so this column will start from one and increment by one upon new record insertion all this increment operation will be done by SQL Server in that way this employee ID column will maintain is unique constrain my SQL Server itself we don't have to insert values into this column explorer server will take care of that in order to save this table you can use the shortcut control s or you can click on this Save button here I will name this table as employee click on ok newly created tablet can be seen under this tablet's node here now I am going to add a Teodor net entity data model for this tablet employee into our Web API project here for that right click on models then add new item select data from the left panel then select ad or dotnet entity data model I will name this model as DB models click on add select generate from database then click on next click on new connection here we need to provide the SQL server details for me it is local backward slash SQL t2000 tool and select the database from this drop down here I will select this one Web API DB then click on OK after creating this entity model there will be a class with this name we need to create an object of this class in order in that with database so let me change this class name to DB model click on next click on next from this window we have to select the database objects that we need to add in our entity model I will select this my each tab then click on finish so here we have added entity data model for the table employee diagrammatic representation of embroider blocks like this inside this entity data model DB models you can see a file employee dot CS file inside that we have properties corresponding to employee table coral we will be using this class employee as a model for web api controls so let's create a new web api controller before that we have to rebuild our solution right click on solution then rebuild solution in order to create a new web api controller right click on controllers folder then and controller then I will select this option with API to controller with actions using entity framework click on add then I will name this controller as employee controller then I will select employee class as a model class here it is and for data context class we will select DB model this is the class we were talking about while we create entity data model we will create an object of this class in order to interact SQL Server database using entity framework we can't add inside the controller we can see some Web API web actions in order to do operations like insert update and so let's look each of them force first of all we have get employs its of the type get with this we will retrieve all the employees inside our employee tab after that we have get employees it is used to retrieve details of employee for a given employee ID like this for this project we don't need this method so let me get rid of this after that we have put employee method it is used to update a given employee record okay first of all we will check whether model state is valid or not we don't need this validation here we'll be doing all validation in our angular for application so let me get rid of this and keep an eye on this HTTP method it is put then we have post employee it's of the typos we use this method to insert new employer course inside the function you can see the same if close to check what the model is valid or not we will do these validations in our angular for application let me get rid of this and here is the final method delete employee it's of the type delete this method is used to delete an employee given ID inside this employee controller we have done all DB interactions like in update and delete using entity framework course which is generated by a Miss escape folding mechanism first of all we have created an object of TB context class TB model as TB inside this get em Doe is method we have retrieved all the employees from employee table using this employees collection and then we have done update operation using this method put employee we will update the employee with given ID inside this parameter and updated details of employee is given inside this object first of all we will check this ID and employee ID from this object are same or not if they are not same we will return a bad request like this if they match each other we will set the angle state of the employee as modified finally we just need to call this Save Changes method it will update the employee with these updated employ details if anything went wrong will catch exception inside this cache block first of all we will check whether there is an employee with given ID using this function employee exists here if there is no employee with this given ID we will to turn not farm otherwise we will draw the exception and from this method we don't have to retain any data that's why we return status code no content and using this method post employees we will insert a new employee into the employee table for that we will add the employee object into this employees collection finally we just need to call this function Save Changes finally we will return and URI of the newly created employee using this function create add root we don't need this URI even though I am NOT going to remove this return statement in order to delete a given employee we will call this method delete employee we have a parameter ID here first of all we will find the employee for the given ID and we will assign that I am going object into this employee if there is no employee we give an ID then employee object will be not in that case we will return not found otherwise we will call this remove function in order to delete the employee finally we just need to call this Save Changes method finally we will return the deleted employee object back to the caller finally we have overwritten the dispose method from the base class which is API control this dispose method is defined inside this API controller we have inherited from API controller into this employee controller this is what we do in our Web API controllers this dispose method is called when system is going to destroy this object and by this dispose method give an opportunity to release the resources that we have used inside this employee controller inside this my controller we have created an object of DB context class DB and we need to release or dispose the object that is what we have done inside this dispose method finally we will call the original dispose method to do the rest now we have implemented all core operations insert update and delete in this Web API project now we can create angular for application from that application we will consume this API project so let's look how we can do that in order to create the angular affo application I will use my visual studio code editor I want to create the application inside this project folder this is where we created our Web API project let me copy this for the path from here open my visual studio code editor and then click on file open folder and paste the path here hit enter select the folder in order to create angular for application I will use the angular CLI command we can run angular CLI command from your command prompt or you can use the integrated terminal from this visual studio code editor for that go to view then click on indicator terminal here in order to create an angular for application you can use this command ng new then application name I will name this application as angular group then hit enter it will create a brand new angular for application and install required angular packages so it will take some time to complete this process so please be patient so here we have created the angular for application angular code in order to run this application you can use this angular CLI command ng serve then double - open hit enter sorry we have to navigate into the project folder that is angular code for that we can do this CB angular crude hit enter now we can run this CL like a man in G's double dash open hit enter so it will open our application in report four thousand and two hundred and this is how the application looks like now I am going to add required components model and service classes into this application for that we need 1 more terminal so click on this plus button here as you can see here my photo path is too long in order to hide this long path I will do this prompt then double dollar symbol hit end up currently we are inside this folder with named project now we need to navigate into this folder angular port for that we have to use this command CD then angular crew in order to create an angular component we can use this CLI command ng then generate component then combine name first of all I am going to create a component with name employees employees in short we can use C for component and G for jury then hit enter newly created component can be seen inside this folder here employees inside the folder we have 1 stat sheet on HTML file 1 type script file for the component and here we have a file with extension spec tortillas it is for test purpose we don't need this test file for this application so let me delete this file when we create components using this CL like a man it will add or import the component inside this app module here we imported the embro is Cameron and here we have added these employees come run inside this declarations array apart from this invoice component we need two more components inside this employees folder for that right-click on this employees folder then open in terminal in order to create the angular component I will use this command ng g4j ready for component then component named employee hit enter then we need one more component with named M Louie - list heat and up so here we have created two components employee and employee lists let me remove this test file from these two components now we need to create model and service class for that I will create one folder inside this M voice folder new folder it will be shared folder inside then we have to create the model and service classes for that right click on it then open in terminal in order to create a service class you can use this command M G then G for Jared and s for service then we need to provide this service class name in this case it will be my service so I will give my hit end up so here we can see the newly created employee service class inside this file employed or service 40s here we have the employee service it is already decorated with injectable because in most of the case service classes are used to inject inside angular components apart from this service file here we have a file with extension spec tortillas it is for test purpose so let me remove this now we need a model flask in order to generate a model class in angular applications we don't have a specific angular CLI even though we have a command to generate a class it would be like this ng then G for generate then class I will name this class as employee dot model hit enter so here we have the newly created type script file for model class it is named as employee dot modeled or PS this is the recommended way to name model class files as per official angular documentation let me remove this suffix dot model from here now inside this employee class we need to add properties for each column inside our employee tab like we have done inside this Web API Flass employee for that let me copy these properties from here and pasting here obviously there are some changes while declaring properties in c-sharp and typescript so we have to edit these declarations as per type scripts index employee ID is of the type in the jaw corresponding data type will be number in typescript so let me remove this public in from here and for first name it's of the type string string rest of the properties are string so let me copy this and paste him for remaining properties here now let me remove this public string from here so here we have done with employee model class okay now it's time to design this application I will be using CSS framework bootstrap for designing this application so let me go to this website get bootstrap comm I'm going to use this version 4.0 point 0 beta version 2 now click on get started here we have the required CDN path first of all I am going to copied this CD and path for the CSS file and I will copy the CSS file inside this index dot HTML here and will paste these chargesheet reference inside this head part now let's copy the script files now we have three script file for this bootstrap one is for jQuery and one is for Papa J s it is used to position elements inside a website and here we have the bootstrap script file let me copy the CDN path for these three script files and passing inside this in destroyed HTML here before the body close tag as you know the default component of an angular application is app component corresponding type script file will be this one have Cumberland or TS and here we have the corresponding HTML inside that we have some default HTML code which is responsible for displaying this much HTML elements inside this website so I am going to start from this HTML file itself I am going to get rid of this default HTML instead of that I need a div element with clasp container so this is a shortcut to create div element with class container you might have seen these shortcut with Emmet extension but Emmet extension or abbreviations are already installed inside this visual studio by default we don't have to install emetics tension into issue studio it is already there if I hit tab we have a div element with class container so these shorthand method will help us to design the apik very easily and we can concentrate on our application logic now inside this container do I want to display employees combined for their let me open this employees component and here we have the corresponding selector and we copy this and pasting here then hit tab so here we are going to display employees component and here is the corresponding HTML employees component or HTML inside that we have a default paragraph instead of that we need a div inside that we have an h2 header with class Jumbotron which is from bootstrap Jumbotron then for background color we have PG secondary BG secondary and for text color we have text white inside this half that we will enter our application name which is employee register I want to align this employee register in middle for that we can add style tag here style is equal to text align is Center let me save all of these modifications and back to the application here so here we have a clean Hebda for this application now beneath this header I want to show to this using grid system for that first of all we need a div with class row inside that we need to this div with class called md6 like this we need one more loop so let me copy this and pasting below that inside the first view you want to show this component employee component for that we can copied this selector from here AB - my let me copy this and paste it inside this first deal then hit tab inside the second do I want to show the component employee list so let me be it selector from its component let me copy this selector and pasting inside this second live here then hit tab let me save this and back to the application so here we have the default HTML from these two components employee and employee list inside the first day we want to show a form to insert or update employees side the second you that means employing this command you want to show all the employees that we have inserted inside a tab so let's look how we can do that first of all I will create this form inside this my component for insert and update operation before designing this Android form I would like to show the structure of our application this is almost similar to the previous video tutorial in which we have discussed how to implement code operations in angular for with firebase first component will be this one I'm Louis component which is the parent compound for these two components employee and employer list inside this employee component we will deal with operations like insert and update with this employed is component we will list all of the employees inside a table and we will do the delete operation inside this component and here we have the shared photo inside that we have employee service and employee model class now we are going to inject this invoice service inside this parent component employees and thereby we can access the same instance of this injected employee service from this parent inside these child components employee and employee list that means we will have an employee array inside this employee service when we insert employees from this employee component we will update that employee array since we are sharing same instance of this employee service from parent to these child component employee and employee service updated employee array can be accessed from this employees so that is the benefit of sharing same service instance from parent component to child once if you can't understand what I have said about this service injection don't worry we will see them in action so right now we are inside the same toy service I want to import this employee model into this employ service for that we can do this import from embroider we need to import employee model class which is employee now I want to declare a property selected employee which is of the type employee model employee now we are going to inject this employee service inside this pattern component which is this one first of all we have to import this employ service from shared photo so that we can do this import from shared folder then employee service we have to import my service class employee service now in order to inject this my service inside this component we just have to add this invoice service inside this providers error here employee service and then we have to pass an object of this employee service inside piece constructor private employee service its of the type employee service now in order to use the same instance of this injected Android service inside this child component employee and employee list we can do this first of all we have my component we have to import this employee service cross here import from shared folder we have to add two dots here because we are inside this employee folder for so far we have to get out of this folder employee for that we have added two dots here and we have shared folder inside that we have this employee service we have to import employee service cross here and just add this parameter inside this constructor employee service its of the type employee service class now we have to do the same inside this employee nice component let me paste the import statement here and let me copy this private parameter from here and pacing inside this I'm going ishcomer and now we can access my service from these three components now I am going to design employee form inside this employee component HTML using this property selected employee for that first of all we need a form with class EMP for EMP form is a custom class to style this form now hit tab we don't need this action attribute here let me remove that we are going to design this form using template driven approach so first of all I would like to add this employee form lot of reference then it is equal to ng for now I am going to design this form using bootstrap classes form row and form group which is almost similar to this form here which is under custom stands inside the forms component in bootstrap documentation I have given this link in video description if you have any doubt you can go through this documentation first of all we need a div with class form draw inside that we need to disk of equal width so div with classes form - group then call md6 like this we need one more do so let me copy this and paste it below that inside this first tip we need a textbox for first name so we can do this input with class form control which is from bootstrap and we don't need this type attribute by default it will be text and then we need to set this name attribute as force name after that I will set local reference first name is equal to ng model now I am going to bind my service property selected employee into this form for that we will use two-way data-binding ng model is equal to now we have to provide the property first name from this employee model okay currently we are inside this employee component here we have injected my service as my service so you can do this employee service dot then selected employee which is inside this service cross here let me copy that and paste in here and then we need first name like this we can attach box for last name inside the second div so let me copy this and paste it inside this div and we have to replace this first name with last name instead of first name we need last name so I'm going to edit these properties here we want to show a text box for position for that we don't need a form Road if we just need a form group do foam group do inside that we can add X box like we have done for first name and last name let me copy and piecing here instead of last name we have position let me edit the corresponding attributes with position position and position after this position textbox we need to show text box for my cold and office in a same row for that we can copy this form grody for first name and last name and pasting here and we want to change corresponding properties according to EMP code and office so let me edit these properties here finally we have office now in order to work this template driven form we have to import forms model into this application for that open app module tortillas file here we have to import forms module for that we can do this import from angular forms angular forms forms module we have to add the same transforms module inside this import area here so let me save all of these modifications here here we have the form to add new employees it is better to add placeholders for identifying these text box purpose so I'm going to add placeholders for these text boxes you now we have to add two buttons for submit and reset for that I will copy this form draw Dave since we need to add these buttons in his same row let me copy this and paste in below that for the first button submit button we need coal MDA and for reset button we just need four grid columns instead of this input element we need a button with class BTN and then BTN LG to enlarge this button and we have BTN block V T and block so that this button will take the full width of called MD H and then we have the last class which is BTN in for to add background and foreground color he tab so here we have the button button this will be submit like this we need one more button for reset button at me he pays this input with this button and this button is of type submit' and this is a normal button so tide will be button instead of this BTN in for class we need a different class which is BTN secondly to add some different background and foreground color and test will be reset now I would like to integrate phone over some icons into these two buttons so here we have the phone over some icons and here is the CDN path for this phone now some icon so let me copy the CD and path from here and we can add this path inside this index dot HTML link then H off will be this one let me save this now let me select an icon for the submit button for that I will search for save here so I will select this one floppy Oh I tagged then class will be far then 4 - 4 P - OH and hit tab and for reset button I will use this one for search repeat here I will get this button so I will use this one far repeat for that we can do this I tagged with class 4 and for a - repeat he tab let me save these and back to the application here now we have done with design in this employee form now I would like to add some CSS rules into this application for that I will use this file style dot CSS inside this file we can add CSS rules for our entire application so let me paste some CSS for Co let me save these and back to the application here now we have added some background color for this employee form using this custom class EMP - for first of all I am going to implement reset operation for this form for that I'm going to define a function reset form and we have a parameter here 4 which is of the type ng form this class is to be imported from forms module import from from angular forms we are going to import ng form class first of all we are going to reset this form using the default reset function after that maybe we said all of the model property so we can do this this dot employee service dot selected employee is equal to employee ID will be null then we have first-name empty string like this we have four more properties so let me copy these and pasting below that four times this is for last name and this one is for TMP code and we have position and office let me remove this last one now we can call this reset form from this button click event for that we just need to go to its HTML then add a click event for this reset button it will be something like this click is equal to reset form and we just need to pass this form local reference so it will be employee for pasting here let me save this and back to the application here if I under some test a task inside these text boxes then click on this reset button so form reset is working now I want to call this same reset form function from this ng Oni lifecycle hook this function will be called when this component is fully loaded so in order to call this function we can do this this don't reset form and for this function code we don't have a parameter to pass for this parameter for so I'm going to make this form parameter as nullable so we just need to add an if clause before this form reset function if form is not equal to null then only we need to call this reset function now back to the application now I am going to add validations into this application for that I will make these two text boxes first name and last name as a mandatory field for this form for that we just need to add a div for those required text boxes fill with class validation error inside that we have a message this field is required we want to short this or error message only when this first name - box is invalid so I will make use of this locker or France first name dot invalid and it should be touched so we can use the class H since this is the required text box we just need to add required attribute for this text box required let me save this and back to the application here now I just click inside this text box first name then click outside the text box so here we have the error message this field is liquid style for this error message is defined inside this row by CSS here standard or CSS here we have defined the custom class validation error in the same way I want to make this last name textbox as a mandatory field for that I will copy this error message deal and paste him below this last name text box instead of first name here we have last name and we want to add the same attribute required here clear let me save this and back to the application here now if I click inside this last name text box then click outside so here we have the validation error this field is required along with this form validation I want to make this submit button as disabled when the form as a whole is not valid for that we just to add this disabled only when this employee form is not valid so I will make use of this locker reference and reform em reformed dot valid so this disabled will be applied when this form is not valid let me save this and back to the application here and you can see that this submit button is already disabled if I under something inside this first name and last name text box can see that this submit button is enabled now it's time to implement insert operation in this application by consuming this Web API method post employee we will call this Web API method from this angular for application by using HTTP module for that first of all open this file app module dirty as file here we have to import HTTP module import from angular HTTP angular HTTP and here we have to import HTTP module then we have to add this HTTP module inside these imports array here now inside this employed service class I will define a function to call this Web API method and we will call this a boy service matter from this form submit event so let's look how we can do that first of all we have to add some important statement for classes like HTTP than HTTP related classes then observables and operators from arcs decks so let me copy paste the required statements here now we have to inject this HTTP inside this employee service so we can do this so we can do this private HTTP it softly type HTTP class now I am going to define the function post employee and for this function we have a parameter EMP it's of the type employment loss which is every now we have to call this Web API method post employee from this function so we can do this this dot HTTP dot post as a first parameter we have to pass the URL for this Web API method so I will just type URL for now as a second parameter we have to pass the data for this Web API method in this case it is an object of employ class containing details of new employee for that I'm going to define a variable body and we are passing this employee object as a decent string so we can do this J'son dot stringify inside that we can pass this object EMP we can pass this body variable as a second parameter here as a third parameter we have to pass there because options for that I am going to add two additional variables here first one is head the options at the options is equal to new headers new headers inside that we have to pass an object to specify the content type can then type is jason so we can pass like this application for slash Jason now the second parameter which is request options because options is equal to new request options new request options inside that we can pass an object like this method is equal to request method nor post then we have headers for that we will pass this header options here sorry I have misspelled options here let me copy this and paste in here now as a third parameter we can pass this variable here request options as a result of this post because it will return a data the type absorber of response so first of all we have to retain the data from this post request and in order to make use of that pretend that we have to convert its type from absorber of response to absorb all of this so let's look how we can do that first of all I will return the data here and we have to convert this absorber of response into absorber of teason so we can do this map inside that we will define another function with parameter X X dot listen that's it so it will convert the absorber of response to absorb all of this finally we have to replace this URL with the corresponding URL for this Web API method post employee for that let me run this application without debug mode so we can use the shortcut ctrl f5 so currently we are running this Web API project here is the base URL so let me copy this and pissing here instead of URL now in order to call this particular Web API method post employee we have to add this URL part to the base address so let me copy this and paste in here finally we are ready to consume this Web API method from this angular application but there is a problem this Web API project will block request from another application or project with different URL or port number this is called cross-domain requests blocking almost often abbreviated as course c o RS so let's look how we can resolve or bypass this because blocking in the SP barnett web api project for that we have two methods one is using this web config file which is this one it is an XML file inside this we can resolve the problem or you can use the nu get packaged in this tutorial I will use and you get packet so select this project then go to tools then library package manager then package manager console then copy paste again you get command from here I have given this and you get command in video description please copy paste from the for now let me copy this and pasting here then hit end up now installation of this packet is completed successfully now let's look how we can use this package here we have the employee controller in order to allow request from another applications we just need to add an attribute here for that first of all we have to use the namespace force from the installed package which is this one system dot web dot HTTP dot course then add this attribute and I will cause so it will allow request from local host for thousand and two hundred into this employee controller local host for thousand and two hundred is the URL where we hosted our angular for application if you want to allow request from all URLs yes use star here like we have done for these headers and methods if you are working on a big project then it will be difficult to apply this enable cause to all controllers in that case we can do this for now let me comment this enable cause for this controller then open this folder app star inside that we have a file Web API config dot CS file inside that we can do this and we have to add this namespace like we have done before so this field allora costs from localhost four thousand and two hundred into this project now let me save all of these modifications here if you rerun this application some of you may get this problem could not load file or assembly system dot web dot h t TP so here we have to run this command and you get command to resolve the problem if we are going to reinstall a BPI core with same version as that of the way PPI cost that we have installed let me hit end off so he we are going to install Web API Co it same version as that of API calls click on is to all and may one this application again so here we have done all required configuration consume this vbi project now we can call this employee service function post employee from this forum submit event so let's do that for that we have to open this HTML employee component got HTML and let's add a submit even here ng submit is equal to own submit inside the function we will pass the local reference for this forum employee forum but we have to define this own submit function inside this come on an employee component on submit function and here we have a parameter form which is of the type ng form inside the function we will call this employee service function post employee so we can do this this dot employee service dot post employee into this function post employee we have to pass an object of employee containing details of new employee that we can retrieve from this variable form so we will do this form dot value contains an object of employee now this function post employee will return an absorber of jason or employee now we can subscribe to that function like this subscribe to side that we have to define an error function with a parameter data function will be like this inside the function I just need to reset this form here for that we can call this reset form function this dot reset form and we will pass an object of this form which is here let me paste here let me save all of these modifications here now back to the application now I am going to add the first employee record you can see that currently we don't have any record inside this employee tab employed details will be something like this Fiona green position will be develop our an employee code will be F G then office will in London now click on submit I hope it is working for me so we said to initial state let me run this command once again so here we have the record for Fiona green most often we will show notification message after save update and delete operation something like me record had successfully or updated successfully or deleted successfully in order to do that I'm going to install this NPM package and DX toaster so let's install this package into our angular for application for that we have to run this command let me copy this then open one more terminal just click on this plus button here then navigate into our project folder hit and then paste our command here hit enter installation of the package is completed with successfully as you can see here here we have to install one more package which is this one angular animations in my case it is already there because when we create this angular application using angular CLI it is already installed if you check this file package door JSON file you can see the package here angular animations so I am NOT going to install this package again now let's move to the next step installed packages can be seen inside this node modules photo so we have to reference a CSS file from install package which is this one it is already mentioned here toaster dot CSS and for that you can open this file angular CLI dot JSON file here we have an array size inside that we have to add your friends for this toaster dot CSS file so reference for this - it will be something like this inside the node modules folder we have a four door ngx toaster inside that we have this file toaster dot CSS now in order to use this package open your app module dot ES file here we have to add an import statement for toaster module like this import toaster module from ngx toaster now we have to add this toaster module inside this like this toaster module dot for food now we can inject toaster service inside my controller first of all we have to add the import statement for toaster service from ng x ng X toaster and we have to import toaster service toast service now in order to intake this toaster service we have to declare a private parameter inside this constructor private toaster which is of the type toaster service class now I want to show a notification message after this insert operation here so we can do this this dot toaster dot success the notification message will be something like this new record added successfully as a second parameter we can give a title for this notification for now I will just give the application name it is employee register since we have made modifications outside this SRC folder we have to rerun this application for there let me go to the first terminal here and then let's stop this application for that you can use this shortcut control C then type while hit enter in order to run this application again you can use this command ng served double - open it end up now I am going to add one more embroidery code to test whether this toaster notification is working or not click on submit so here we have the notification my register new record had the success free so here we have the deal forum Royalist cumberland inside this do i want to list all of the employees that we have inserted into employ toppled so far for that we will use an HTML table so let's look how we can do that here we are inside employee service class i want to declare an array of employee to store the inserted employees for that we can do this employee list it will be an array of employee model class which is employee in order to retrieve all the inserted employees from embroider ball we can consume this feb api method get employees for that i will define a new function get employee list here we need to call this web api method get employees which is of the type get or that we can do this this dot HTTP dot get inside this function we have only one parameter which is the URL for the web api method it will be same as this one so let me copy paste here as a result of this get request we will get absorber of response so here we need to convert that absorber of response into employee array we just need to call the function map inside that we will define an error function data which is of the type response inside the function we have to return the employee array for that we can do this return data dot jason and we have to cast this JSON object as employee array so we can do this employee alright so after execution of this HTTP request we will have an array of employees so we want to assign that employee array into this variable here employee list for that we will use the promised method to promise then call the function then inside that we can refine a narrow function like this with variable X the function will be something like this this dot employee list is equal to the array which is this parameter X right here which is returned from this map function now we can call this get employees list function from our employ list component so let's deal with that here we have the employee list component here we already injected employee service along with that we want to add an import statement for employee class like this inside this ng on it life cycle hook we will call this employ service function get employee list for that we can do this this dot employee service dawn get employee list that's it so this get employee list function will retrieve all the employees from our employee table and store inside this employee list are defined here so here we can make use of this employee list array to display employees inside an HTML table for that open this embroidery list come on and HTML here see we need an HTML table so we can do this table and we need these classes from bootstrap trouble than double - awesome then double - ho ho hit tab obviously inside the table we need T our elements to display rows here we are going to iterate through this Employee List variable here for that we can use this directive ng 4 star ng 4 is equal to let employ off inside this employees come on and here we have injected employed service class as employee service so we have to use this parameter name let me copy this and paste in here inside this embrace service class here we have a list with this name employee list so let me go and pasting here so here we are going to I trade through each element inside this M loyalist array inside the row we will have TD elements for employee name and employee code so I will do that here M blue e dot first name then - embroidered last name so let me copy this and paste in here instead of first name we have last name and we need one more TD for employee code so let me copy this and pasting here instead of first name we have e mpcore let me save all of these modifications here and back to the application so here we have the HTML tab listing all of the employees that we have inserted into employee table Fiona green and James Jones now I want to add one additional column into this table in order to show the buttons for update and delete operation so let's look how we can do that TD element inside that we need to anchor elements one for update and one for delete operation anger tag with class BTN this is from bootstrap this is 482 operation or update operation inside this button I want to show for over some icon for pencil so I will do this I tag then class 4 then 4 - pencil - square - pop then he tab like this we need one more button for delete operation so let me copy this and paste it below that here this is for delete operation so I want to change this phone over some class here for - trash - OH and I want to add the text color as thread for that I will use this bootstrap class text - danger let me say these and back to the application here so here we have padded buttons for update and delete operation now we have done with listing employees inside this second div here when you sir click on this pencil or edit button we want to show the corresponding employ details inside this form here after that you say can edit the employ details if they click on the submit button we will update the employ details so let's look how we can do this update operation first of all I am going to add a click event for this button or anger tag for edit button so we can do this click is equal to will call a function show for edit as a parameter for this function I will pass this employee object let me copy this and paste in here now we want to define this function inside the embroideries component here so for edit we have a parameter EMP it's of the type employee class then function will be something like this we are displaying this form based on this property selected employee that you can see here employee component HTML so we just need to update this selected employee property with the employee object on which we have triggered this click event so we can do this this dot employee service dot selected employee is equal to e MP so here we are trying to pass a reference for this employee object into this selected employee property so whenever we update employee details inside this form corresponding changes can be seen inside this employee object EMP here in order to avoid that we will pass a copy of this object into this property selected employee for that we can do this object dot assign then EMP let me save all of these modifications here and back to the application here now I'm going to update this record for Fiona green for that I will click on this pencil button here so here we can see the employ details for the employee Fiona green we have already implemented insert operation using this form now we can do the update operation with the same form for that we have to do some additional works so let's look what are they we have implemented this employee form inside this HTML file employee component dot HTML first of all we need to add a hidden field for employee ID which is the primary key for the employee table it should be there because we are using same form for insert and update operation based on the value of employee ID property we can decide whether it is update or insert operation so I'm going to add a hidden field for employee ID like this so here we have the employee ID hidden field input type hidden' then name will be employee ID here we have the local reference and it is assigned with ng-model here we have the two-way data-binding 40 employee ID property here we have the submit even for this employee form inside this event we want to do insert and update operation based on the employee ID value during insert operation employee ID will be null because we are calling this reset form during an gianni lifecycle hook and after any insert operation so during insert operation employee ID will be null during update operation we are saying the corresponding employee object into this form so employee ID will not be null so employee ID will be an individual so we can do the insert operation when the employee ID is not form dot value dot MDE ID is equal to null an employee ID is equal to null we will do the insert operation else we will do the update operation after operations insert update or delete we have to refresh this employ dist for that I'm gonna call this employees service function get employee lease which is returned for refreshing this employ list here so I'm going to call this get employees lease function after insert operation for that I will do this this dot employee service dot get employee list that's it inside this else part we are going to implement update operation for the selected employee using this Web API method put employees here we have two parameters ID then employee object in order to consume this Web API method I'm going to define a function inside this employee service class like we have done here for insert operation post employee there is only a few changes from this post employee function so let me copy paste the function here put employee here we have two parameters ID then employee object then here we have declared three variables like we have done for this post my function only difference is that here we have request method or put instead of request method or post this ID parameter is passed through URL by appending this ID variable to the URL and we have passed this employ object inside this body here so here we made the HTTP request for update operation it will return a data of the type absorber off response and here we will convert that absorber off responds to absorber off Jason or object now we can call this put employee function inside this form submit even here so I will copy paste the code here so here we called put my function by passing these two parameters employee ID then an object of employee here first of all it will reset this form by calling this reset form function like we have done here then we will refresh this employed is to show the updated employee list by calling this function get Employee List then this will show the toaster notification record updater successfully now let me save all of these modifications here back to the application now I am going to update this record for James here for that you can click on this pencil button here I want to change this James Jones to James Smith then I will change this Android code here as J s then click on submit so here we have updated James Jones to James Smith you can see the poster notification here finally here we are going to implement delete operation using this fur baby I met there delete employee here we have a single parameter ID for the corresponding employee ID first of all I am going to define delete employee function inside this employee service class like this delete employee here we have a single parameter ID it's of the type number then we will make the HTTP request of the type delete then we need to pass the URL like this this is the corresponding URL for this Philippi I method delete employee along with that we have to pass the ID for the corresponding employee so here we have a pendant ID parameter into this URL finally here we have converted observer of response to absorber of Jason so we can call this delete employee function and we can call this delete employee function inside the click event for this button so I'm gonna add a click even here click on delete into this function we have to pass the ID for the corresponding employee so we can do this employee dot employee ID now we have to define this on delete function inside this component here on delete here we have a parameter I leave it softly type number then we just need to call the function from employee service class this door employee service dot delete employee and then we will pass the ID here before this delete operation we have to confirm the user whether user is sure about this delete operation because delete operation is a loss of data so we will confirm the operation by calling this function confirm are you sure to delete this code if you so click yes then only we are going to do this delete operation you will subscribe to the returned absorber like this subscribe inside that we will define another function like this first of all we will refresh the M doing is this dot employee service God get em released then we want to show the toaster notification for that we have to inject on cell service into this employee list component like we have done inside my component for that we can do this import toaster service from ndx toaster now we have to define a private parameter inside the constructor toaster it's of the type toaster service then we can do this this dot toaster dot warning inside that we can show this warning message deleted successfully a notification title will be something like this M Louie register here we have a small change inside this delete employee function for port number let me copy paste here port number now we can save all of these modifications and back to the application here now I am going to delete this record for James means for that you can click on this delete button here are you sure to delete this record click on OK so here we have deleted record for James Smith here we have the toaster message deleted successfully if you found this video helpful please thumbs up this video and for more awesome videos like this please be subscribed to this channel dotnet move 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: 218,374

Rating: 4.899879 out of 5

Keywords: Angular 4 CRUD With Web API, Angular 4 Tutorial, CRUD Operations in Angular 4 Using Asp.Net Web API, Angular 4 CRUD With Web API Using SQL Serever and Entity Framework, Insert Update Delete in Angular 4 Using Asp.Net Web API, call web api from angular 4, consume web api in angular 4, Enable CROS in Asp.Net Web API, angular 4 crud tutorial, angular 4 crud example, Angular 4 CRUD Application, Angular and Asp.Net Web API, CodAffection

Id: Ous6v0r7kXc

Length: 73min 39sec (4419 seconds)

Published: Mon Nov 20 2017