Employee management system using angular | crud in angular 11

hello everyone welcome to my youtube channel so today we are going to see how to develop an angular application so in previous video we have developed uh rest endpoints so in this video we are going to face that endpoints and we are going to create an angular application so let's have a quick demo so you can see we can add new employee here and the call will be gone to the backend and it will store into the database okay so you can see the new record has been added successfully the id17 we can edit also as you can see the salary has been updated to 80 000 okay if you want uh you can delete also you can see okay the record has been edited successfully so let's start this table upon uh angular application and just open uh cmd from the folder structure and just type the engine new angular project name so it will create our project so uh it will take some time depending on the speed of internet it will ask for the routing and now which type of css you have okay as you can see our project has been created successfully uh we'll go inside our project and then we'll open that project into vsco to open it uh into the vs code you just need to type code space dot so it will open into obvious code okay as you can see our project has been uh created successfully we have opened it into our vs code so inside the src app so you can see there are four files there so app component app modules we just now create one terminal now we are going to type command the ng server so we can see the output so now it is generating our project it is building our project and after that we will see our outputting of our localhost 4.0 as you can see oh it is compile successful and running on port 4.00 as you can see here the employment in the system app is running okay now we go inside our index.html page so here we are going to add here you can see the approved function is there now that will call our application so here uh we will go on bootstrap.com i'll provide the link in description so inside our document from here we can add a css and js files here you can see it is bundle just uh if you want to separate files then oh there are separate links also there so for this project we pick the bundle down in body we are going to add that okay you can see project our project has been completely successfully compiled we'll create another terminal and here we are going to create some components so nggc command is used for creating components so here you can see compo we have i have used component slash dashboard that means the dashboard component will be created inside the component folder okay similarly we will create a service employee service as you can see on the left side the services folder has also created now we are going to create a class inside model folder we are going to create our employee class okay so inside component we have dashboard component that this is dashboard css if you want to change any css related stuff this is our html page this is our uh testing related file and this is our main yes wait sorry ps5 okay now we will go inside app component here you can see all the code which is present okay we don't need this code we just remove all the code except last line which is a router outlet okay yeah so inside our uh dashboard.ts file here you can see the selector is there so selector is nothing but which is used to call that particular component okay so we are going to write that selector code inside of app.uh app.compound.html file yes so you can see here the dashboard component is there now and all the uh stops was gone now we are going to create some uh code we are going to write some code inside our dashboard component so we will go on booster and search for nova you can see we select the first one copy the code and we add it inside a container container fluid is a class which will occupy all our browser size okay here we are going to paste that code now we are going to change the name and yeah we are going to remove this uh ul tag we don't need that we just need one button there so we are going to take that button and also remove the form tag okay we change name of button to add employee you can see the data is framed up okay now we are going to check for the model so this is a model when you click close it will close that so here you can see we'll take that code and add it here [Music] so you can see this is our first one uh the model and the button has various attributes so these attributes are calling this model so when you click on that button it will be the model will be called we have changed id and now you are also going to change your target attribute so there is no data inside a model body so we are going to select perform search for form and we are going to get this data we have added that code here okay so inside our form we have now two buttons one is for dismiss and another is for our save changes we are going to change attributes there we are going to remove the unwanted stuff and we will create our own data for our name first name last name salary and all these things you change the button name to add employee okay now you can see when we click on the add employee button the model will be pop-up and as you can see the model title model name employee and email ready all these fields are there i'm just changing the model title here to add new employee here now we are going to import some form tags from packages first one is a form builder foreign inside our app dot modulo here we are going to import the directory modules take two formats we'll save that file and close it now we are going to create one uh employee detail object which will be which will get the data from that form so it is nothing but a form group now inside of constructor we are going to add a form builder now inside our employee details we are going to set the for each employees data means now the first name the salary the email address so we will get the data in the following structure so whenever we click on that form so we get all the data like email name salary so we are going to we are going to bind the data here so on it we have set the data to null now uh inside our dashboard component for form tab we are going to add form group and we will give name employee detail so basically we are binding the form and that object also we are here going to add the form control name similarly for others also and on the button click we are going to column1 function add employee function so we are going to write that function inside our component.ts5 okay now here we just checking the data so just shift f12 and then you can see the data there okay here you can see all the data will be there so now we are going to filter the data and we will get only the required data so now we are going to add one service there so http model client model will be required to create a service we are going to import the http client from angular slash http slash common file now yeah so inside our employee service we are going to inject the http client module and also in constructor we are going to import that okay yeah so inside our employee class we are going to add some attributes there so first one is id hello set id to 0 name to null email and salary okay that's it now uh here we are going to create one object of employee class now whenever user click on add employee so we are going to add the data into object employee object the employee detail dot value dot id this will give us the id name salary and or similar for email okay now inside employee service we are going to add one url in constructor we are going to set value to that url and employ url so this is our url uh we have created in our last video if you are not watching that video please go and uh watch that video so i'll give the link in the description below so we are now creating one method for ad employee which is of observable type okay here we are getting the employee data and now we are going to pass the data to that url http dot post employee and inside that we are calling that url comma that data okay this is how we are going to call that particular url now uh inside our class uh main dashboard.com.screen we have imported that service file now we are going to call that service method add employee method and we are going to pass that employee object okay and on this method we are going to subscribe and we'll check for result and error if you get any error then we are going just going to print that one [Music] now we are going to create another method for get all employee so we are going to create one uh array of employee list from here we are going to call that service and then we are going to write one method get all employee and on that method we are going to subscribe and the data will be faced from that database and it will be inside our employee list and if you got any error then we are just printing that error in on console okay now we are going to create one method inside our service file observable of employees okay uh we will create one url there get employee url and we are going to add data inside that url from constructor uh okay so the gate method will be uh will get us all the data you just need to pass the url okay that's it and whenever we uh add employee we are fetching all the data also on init method also we are going to face the data oh get all right now here we need to add one table so here we are going to search for table so we will take the first one add it here and yeah we'll all read that table data okay here oh we are going to add two buttons there one is for edit and another is for delete so from employee only we are going to copy that data for buttons and add it here we are going to change name to edit and delete and on click we are going to call the delete method we have changed the type of button so what a primer is okay so you can see here the edit and delete buttons are there so we just approaching outline to primary number line to danger okay and also we are going to add some margin there you can see now we are going to click on that edit button the model should be popup so for that also we are now going to create one model so we'll pick up the first one and we'll add it here below add employee model okay we remove that buttons attributes you have changed id to edit employee and also we are going to change for the data target attribute this now change draw model title to edit employee test now here we are going to add the form data so we'll just take the data ago from our code you take whole form data and we'll add it here instead of model okay now you can see when you click on edit the form is showing up so we just need to fill the data inside the so data should be um update so on edit we are going to call one function so here we are going to write that function now we are going to save the value of that row to this particular employee detailed object so this is how we are going to add name and salary and uh okay that's it so we are going to add a ng for loop to populate over all the data here now we are going to add the employee dot employee id similarly for all the fields okay now you can see all the data has been popped up if you are facing any error then uh due to course property then uh you just need to add the chorus uh insiders input application so here now we are going to uh you want the data when you click on edit the data should be out of filtering so for that uh inside our dashboard component ts5 so we have not added the id okay that's the one issue that now you can see yeah so data will be data is auto populated okay now here for update so we are going to write one method which is which will send the data to the service file and click here we are calling the method update employee and passing the employee details okay now we are going to call that method so our data will be there inside uh employee detail object so now we are going to add the data into our employee object now inside our service file we are going to create one another uh string variable update url and we are going to set the data to that particular url um okay now here we are going to add our update we are writing function to update employee details here we are passing the employee dot put method is there and we are going to pass that url and the employee object okay so from update employee uh we are going to call that particular method which we have right in your service and here we are going to pass that employee object in this method we are going to subscribe and check for the results and if you get any errors then we are going to print that error on console and also we are going to call uh the get all employee method so that changes can be reflected on our you can see this compiled successfully now when you click on uh edit button so data should be populated okay you can see the six thousand but the form is not closing wire itself so for that uh here inside our dashboard component and here we are going to add that property okay data dismiss so that will be that will close our model so whenever we are going to edit any data you can see the data has been edited successfully so for adam also we are going to uh the data dismiss model will be there so that also will be dismissed after submitting the data and now for delete method is our remaining so when we click on delete the delete method will be called you are passing your employee data now we are writing here delete method okay now over here uh inside our service right uh we are now going to create one variable delete employee url and from constructor we are going to set that value to that particular url to a particular variable one here okay now we are going to write method there deleting file so on this we are going to call the delete method we are going to pass the url close employ.i so this is nothing but uh in our url we are sending the employee id which needs to be detected okay and now we are going to call that a method from here so employee service dot delete employee sorry so you should delete employees okay and on that subscribe we are going to check for results if there are end users we are going to print that on console and from here also oh yeah we are going to pop up on allah employ delivery successfully and once we click on that uh method though we are reaching all the employees okay and if you if we got any error then we are just printing that error okay as you can see it is successfully completed now whenever we click on delete the employees has been deleted successfully okay thank you for watching this video guys if you like the video please like share and subscribe and don't forget to press the bell icon okay thank you

Channel: Code Logic

Views: 915

Keywords: angular, employee management app in angular, angular tutorial, employee management system in angular, angular project for employee management, angular employee management app, employee management project in angular 11, employee management application in angular, employee management system web application, angular crud application, angular crud with web api, angular crud example, angular crud tutorial, angular crud operations, crud angular spring, angularjs mysql crud

Id: hvzaUfemy2E

Length: 45min 3sec (2703 seconds)

Published: Sat Nov 13 2021