Create operation in angular

this is part 31 of anglich rad tutorial in this video we will discuss creating a new employee using the create employee form this is continuation to part 30 so please watch part 30 before proceeding and here's what we want to do using our create employee form we want to provide the information of the new employee that we want to create and once we click the Save button we want to add this new employee to the list of employees that we have and then redirect the user to this list page where we can see that newly added employee in the moment we are on the list route and as you can see we've got three employee objects here and if you recollect from a previous video these three employee objects are coming from our employee service notice within this employee service we've got this private field list employees which has got those three employee objects in addition to this private field we also have this get employees method and this method returns that list of employees and then our list employees component is calling that method and that's how we see the list of employees right here now when we add a new employee using this create employee form we want to add that employee to this private field within our employee service so for that let's go ahead and create a save method and this method is going to receive that new employee object that we want to add and obviously the type of this object is going to be employee now all we want this method to do is push this employee object into this private array that we have so this push method pushes the employee object to the array at the moment all our employees data is within this employee service this means when we refresh the browser we are going to lose the new employees that we have added in our upcoming videos in the series we will discuss persisting this employee's data to a database table now when we click the Save button on our create employee form we want to call the save method in our employee service so let's open our create employee component and then import our employee service in addition to this employee service we also need angular's router service remember after we saved the new employee we don't want to be on this create route we want to redirect the user to the less drought so we can see that newly added employee so to redirect the user to the list route we are going to make use of the router service navigate method so let's import angular router service from the angular router package next let's inject both these services employee service and anglers router service into this create employee component using its constructor the constructor is right here so let's create a private field for our service I'm going to name it underscore employee service the type of this is employee service now let's create a private field for the angular's router service I'm going to name it underscore router and the type of this is router finally let's modify the save employee method within our component so they save employee method is right here now there is no need to pass the new employee object that we want to save as a parameter to this save employee method that's because the model for this create employee component is this employee object and notice at the moment all the properties are initialized to null so whenever we type the values within these form fields angular's two-way data-binding is going to keep the values that we type within the form fields and the values in these properties in sync so we already have the employee object that we want to save available within our component class so there is no need to pass that object as a parameter to the same employee method from the view template so let's go ahead and delete this parameter this method is already bound to ng submit event within our view template so when we submit the form we are calling the save employee method and passing it the employee object if you want to save now there's no need to pass this employee object because it's already available within our component class so let's remove that so all that is left to do is save the new employee and redirect the user to the list route to save the new employee we are going to make use of the employee service that we have injected and on this service let's call the save method and to that let's pass the employee model object that we want to save and then let's use the injected router service and then use its navigate method to navigate to the list route so that route that we want to navigate is list let's save all these changes and then take a quick look at the browser now let's provide the details of the new employee that we want to save and then click the Save button notice how our new employee is saved and we are redirected and we see our new employee Robert right here now if you take a close look at this data there is a small inconsistency here notice the Department of this new employee that we just added we are showing the department ID and look at the existing employees we are showing the department name the reason we have this inconsistency is because for the existing employees within the department property we are storing the department name and for the new employee we are storing the department ID now let's go ahead and fix this existing data our existing employees data is in the employee service in this private field at lists employees notice at the moment we have the department name instead of the department name let's include department ID to get the department ID let's look at the department object within our create employee component so here we have the department names and department IDs notice for HR it is - and for ID it is three so let's change the department property in each of the objects notice now we only see over three existing employees what happened to the new employee that we have just added well that's because at the moment we are not storing this employee's data to a database table we are only storing it in memory in our employee service so this means when the application restarts all our new employees will be lost now if you're wondering why did our application restart well that's because when we made the department changes within our employee service and when we saved those changes since our application server is running in watch mode it automatically restarted and as a result they lost the new employee that we just added in our upcoming videos in this series we will discuss saving this employee's data to a database table when saving data storing department ID is fine but when we display the data to the end user this department ID does not make any sense to him so we should actually be displaying the department name instead of department ID we're discuss how to fix this in our next video that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 31,214

Keywords: create crud in angular, angular push element to array, angular add object to array

Id: CUAHJxWGia0

Length: 8min 5sec (485 seconds)

Published: Wed Mar 14 2018