Angular 2 CRUD - Two Way Data binding

cube demo of this video tutorial in this tutorial we will discuss how to implement angular 2 food operations using two-way data-binding without a database this is the final output of this tutorial you can insert you am going like this click on submit' newly added record can be seen here if you want to edit your code selected a quote then update the information here click on submit so here we updated the embroider code if you want to delete the record select the employee then click on delete here so I hope you will find this tutorial as a material to understand at a binding in angular 2 both unidirectional and two-way data-binding in angular 2 so please watch till the end of this video tutorial what's up YouTube welcome to dotnet move in this tutorial we will create will have two applications for operations like insert update and delete without database that means data in this application is not persistent that means after refreshing the web page newly and a report will be gone the main agenda of this tutorial is to understand data binding in angular 2 like you need additional binding and two-way data binding before sad in 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 be subscribe to this channel dotnet Moe without further adieu let get started this is my visual studio code I will be using this vs code as an IDE for this application development apart from this I have installed NPM nodejs then typescript and angular CLI I hope you have install these packages in your system also now we are going to create a fresh angular 2 application in this folder for that I am going to open my command pop in administrator then set current leader tree as this one for that you can use the command CD then provide this file directory here for you can use a shortcut in Windows I don't know if there is any shortcut like this in Linux or Mac in Windows you can do this hold shift then right-click then click on this open command window here so now we are in this project directory now we need to create a fresh angular 2 application for that you can use this command ng mu then name of the app I will name it as angular2 crew click and up it will create effort of his name and will are too crude inside that it will add basically files for the first application you will take some time to complete this process so I will post this recording after installation is completed I will resume the recording so here we created the application successfully now we need to run this application before there let me change the directory as this folder angular to crude click under let's run this application for that you can use this command n T so double - open click enter this is how the fresh angular 2 application looks like for the source code for the application can be seen inside this folder SRC if you change any one of these files code here automatically this application will be updated here now we need to create this application from scratch using this previous code editor for there let me copy this folder location from here and then click on file open folder paste the file directory here click enter then click on select folder so here we open angular 2 project inside this vs code so sport for this application can be seen inside this folder SRC here then expand app folder here you can see the default component inside and not to applications as app component god cheese this common is separated with template URL that means HTML for this component as app component dot HTML here is the file a component dot HTML these HTML codes are responsible for this view right here apart from this term bit URL here we have the stat sheet URL in order to specify stand sheet for this component for now we have one style sheet add component dot CSS here is the file for now this file is empty in this time sheet file I'm going to copy/paste few CSS rules that I have already created for this application here now back to app component here we have a property title if you check the HTML file here we have used the title here now I am going to remove the title property from the component and we need to edit this HTML file here I will remove this much course here and we don't need this image here I will remove that also I want to set this h1 as angular 2 ku app now let me save all of these files here inside the browser you can see that application is updated automatically now back to the component file here in this application we are going to deal with employee details so I am going to create a class for the employee here export class as M Bui inside that we have to pass the properties for this class first of all we have employee ID employee ID as number then we have employee code as string finally employee name as string now I will declare a constant M glowing area here employee all right I will initialize this employee arrived with three my DK's now inside this app component class I will create a property to store this constant array M LOI collection is equal to M bluey array now we need to show this employee array inside this application so let's look how we can do that for that open the HTML app component or HTML first of all I will add a new element here class is equal to M blowy list inside that we will add Li elements and I for that we will iterate through the am blowing collection here so we can do that using ng 4 star ng 4 is equal to let them LOI of my collection let me copy this and paste in here so inside this Ally element we can add the employee name and employee code span class is equal to badge here we can show the ID of employee so I will do this my dot employee ID after that we will add employee code and employee name so let me copy this and I seen your - employee names code then you need now let me save this and check the application in browser so here we have listed three employees from employee array here CSS for the styling of this list is even inside this time sheet here now we are going to implement on click event for this li elements here for that we can do this go to the HTML file here then add the event click for this li element like this click is equal to then we will call a function here open for edit inside this function we will pass a parameter as this employee object that we copy this and paste in here now we need to create this function inside the component file here so let me copy this function from here and we can do this open for edit we have a parameter for this function employee is of the type class employee return type of this function is void maybe save this selected employee object into the new object inside this application for that I am going to create an object here selected employee it's of the type employee cause now I am going to initialize this object like this employee ID is equal to 0 then core will be empty string the name of employee will be empty string when you sir click on any one of these alloy element here let me save the corresponding I am going it is object into the object here but then we can do this this dot select at employee is equal to M blowy so we save the past employ details into this object here now I am going to create a div to update these properties here code and name for that I will do this video class is equal to employee form now I am going to add an input text box for these two fields code and name for that we can do this input now we are going to use the two-way data-binding in angular 2 and the model is equal to let me copy this object name from here selected employee then paste the object here dot core now will add a CSS class here class is equal to text box then I will set the pace holder here as code so this will add a text boss for the employee code here after that we need to add a line break now let me copy these and pasting below that now this one is for the employee name so I will edit this code as name here named place holder will be named now let me save this and check our browser here here you can't see nothing if you inspect the browser you can see that there might be some errors because we have not specified this module for this ng-model in order to use this module we have to use the angular forms module inside the application so go to the app module dot CSS file and we have to import forms module here import from let me copy this and pissing here instead of Co we will use forms now give the module name here forms module right here now we need to add this module inside this import all right here now let's check the application so here we can see the input controls that we have just added for employ code and name if you click on this item here you can see that selected employee informations are listed inside these input controls so that we have done here when we select an item from this Ally element here it will call the function open for edit so here is the function open for ad it will set this selected employee details into this object selected employees using this object we have created a div here inside there we have added two text boxes for employee and employee code so this is what we call two-way data-binding in angular 2 and this one is called you need additional data binding in angular 2 so he displayed the employee ID inside this badge here 1 2 3 if you change the value of employee ID inside component that value will be change here in this view in case of two-way data-binding if you change the value of property selected employee code and selected employee name in Cumberland that change will be seen here also in the same way if you change the value of input text box here the same changes will be applied in component also so that is why we call them as two-way data-binding first of all if we select an item from this li element we need to set the class for this Li as selected for that we can do this go to the alloy element here then we can add the class here class dot selector we will add the class selector if this M GUI that means this employee is equal to selected employee selected employee let me save this and check the application here I will select the first one so here you can see that this Li element got a class selected now if you click on this second items we can see that draws his hand off for this second item here now I am going to add a button with labelled submit after these two text boxes so I will do this go to the HTML file then we can add a button here button button text will be sub meat let me save these and check the application here so here we have the submit button using this div input elements I will do the insert and update operations by default there is no selected employee inside this view input elements so we will do the insert operation when we select an item from this place we will do the update operation so I am going to add a label to identify the operation whether it is insert or update so we will be adding the label using condition like this first of all we will add a label above all of these input elements here and we have to set the label texts like this for that I will use the condition here if selected employee dot employee ID is equal to zero then we can say that this is an insert operation so I will set the text as insert I am going otherwise we can say that this is an update operation update employee let me save this and check the application here so here you can see that default labelled text is insert employee since employee ID is zero and we select an item from this list labelled test will be changed to update employee now I am going to add a line break after this level here so we can add the be our element here let me check the application here so it looks fine now in order to implement insert and update operation I am going to add click even for this button here so let's add the click even here click function name will be add or edit now we need to define this function inside the component here function name is add or edit we don't have any parameter for this function certain type of this function will be void inside the function first of all we will check if this dot selected employee dot employee ID is equal to zero or not if it is equal to zero we can say that this is an insert operation in order to add new employee information into the collection embryo collection we can do this this dot employee collection dot push and we will put this object into my collection like this before this operation we have to update this employee ID for new employees employee ID will be zero and we have to set the employee ID to the next maximum employee ID from the list for there we will do this this dot selected employee employee ID is equal to math dot max dot apply as a first parameter we will pass the math interface then we can do this this dot employee collection dot map inside that we will define a function to return the employee ID we have a parameter X and here we need to return the employee ID like this X dot employee ID so this will give the maximum employee ID from the employee collection finally we have to add one to the result here so here we updated the employee ID to the next maximum employee ID for update operation we don't have to do anything when we change the employee information here same changes will be applied in become one an employee collection because we have shown these controllers using two-way data-binding at the end of this function at the end of this function I will reset the object selected employee is equal to let me copy this code from here and paste in here so with this function add or edit we have implemented insert and update operation we have called this add or edit function inside the click event of this button here sorry here we have missed a pair of parentheses so I will add it here now save all of these files here go to file then save what now let's check the application here now I am going to add new and go into this list here click on submit newly added MOU can be seen here if you want to edit an employer code select the record then update the informations here click on submit so here you can see the updated employee record finally we are going to implement delete operation inside this division for that I will add a delete button beside this submit button in case of insert operation there won't be any delete button and we select an item from this list we can show the delete button here so we want to add a button when employee ID is not equal to zero for that we can do this button button text will be delete now we want to add the condition for showing this button ng if is equal to selected my dot employee ID not equal to zero then we will show this button let me save this and check the application here by default you can't see the delete button here if I select an item from this list we can see the delete button now I am going to add click even for this button so I will add the even here click then we will call the function delete here now let's define this function inside the component here function name will be delete the turn type will be void inside there we will do the delete operation for this selected employee selected employee object is stored inside this object here so we can do this this dot employee collection is equal to this dot employee collection employee collection dot filter X such that X not equal to this dot selected employee so this will return all of the employee except the employee which is not equal to selected employee object finally we have to reset this object this dot selected employ so let me copy this line from here and pasting here now let me save all of these files here and check the application here now let me delete this M go here on Fiona agreed click on delete so here we deleted the record for Fiona key in this tutorial we have discussed how to implement angular through operations using two-way data-binding without a database if you found this video helpful please thumbs up this video if you are new here please please subscribe to this channel dotnet move you can download this project source code from the link given below in video description 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: 5,494

Keywords: angular 2 crud, using two way databinding, data binding in angular 2, unidirectional databinding in angular 2, angular 2 databinding using an example, angular 2 in visual studio code, angular 2 app from scratch, with source code, angular2 data binding example, CodAffection

Id: 6Asuj-GeEQI

Length: 23min 20sec (1400 seconds)

Published: Tue Sep 12 2017