Angular 7 CRUD using Firestore

quick demo of the video this is an angular servant tutorial to implement crack operations insert update and delete in Fastow or cloud fast oh here we have the final output of the sample project now let me show you how to insert a new record now let's submit the form so here we have insert a new record for Jennifer Acosta in order to update the record click on this row so that it will populate the corresponding employee details inside this left form here now let's make the required changes finally submit the form so here we have updated corresponding employee details in order to delete the record click on this trash icon here then confirm the operation so here we have successfully deleted the record I hope you will find this tutorial helpful for your upcoming anguilla 7 projects so please watch till the end of the video before starting this video 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 subscribed to this channel and click on the bell icon to get notification about my new videos most of the video LSN here also has a written blog post you can find the link in video description you can grab code from the as well what's up YouTube welcome to core affection this is an angular 7 tutorial for bigness in this video we will implement angular 7 quad operations in file store without further ado let get started here is my visual studio code editor I will be using this IDE for the application development first of all open the folder where we want to save the project in order to create an angular project we have to execute angular CLI commands from command prompt or terminal from the IDE I will use terminal from Visual Studio code editor in order to create the project you can use this command ng new I will name this application as angular 7 Fastow hit enter would you like to add angular routing know which style sheet format would you like to use I will stick with CSS hit enter as a result of the command execution here we have created the project folder which named angular 7 faster currently it is installing some default packages from NPM so it will take some time so please be patient so here we have brand-new angular 7 project in previous videos we have implemented angular crack operations with firebase or real-time database in firebase project this is the force and we discuss faster cred with angular project now before continuing with this project let's discuss the difference between real-time database and Fastow in Fi based project you can see the comparison in firebase website itself as you can see here firebase started with real-time database it is considered as a solution for mobile apps that requires real-time singing of data but Fastow is an improved version of real-time database here is the main reason to switch from real-time database to faster it is rich in feature faster queries and scales better than real-time database so here is the main difference in real-time database data is stored as a JSON tree while in Fastow it is a collection of organized documents this picture shows the difference between them here we have the real-time database inside that data stored as a JSON tree and here we have the file store data model data stored in a structured manner like key value pair in real time database data model becomes complex for bigger applications in case of queries real-time database supports limited functions as the next step we have to create a firebase project for that you can go to this website here console dot firebase google.com then click on add project I will name this project as Fastow crack then scroll to bottom and accept these terms here click on create project so here we are inside the project overview now let's create a database for that go to database here we have to create a DB inside this file store so click on this create database button here I will select the test mode so that we don't need any permission to work with the database click on enable compared to SQL DB slack SQL or MySQL table in SQL DB is treated as collection in noise QLD bees like this first oh and table rows in SQL Debbie's is treated as a document in noise QLD B so first of all let me create employees collection in order to store employee documents for that click on add collection here since we are working with employee details inside the project I want to name this collection as employees click on next in this second step you can add the first document into this collection Fastow document contains a set of key value pairs for example I will add the field name here field 1 I will enter the value here if you need more fields you can add that here field 2 then here we have the value here we have the document ID to uniquely identify a specific document from the collection I will leave this field as empty to stow auto-generated Fastow ID now click on save so here we have the newly added document here we have the corresponding auto-generated ID and here we have the fields now let's delete this sample document from this employee's collection in order to work with this firebase project from our angular project we have to install few NPM packages for that first of all I will navigate inside the project folder here now let's install the required packages and p.m. I for install double - save in short you can type yes here first package will be firebase itself and we need another package angular 4 / fire so here we have installed those two packages now we have to add this firebase corruption details into this angular project here for that you can click on this web icon here then copy this object from conflict part here then back to the project I want to save those details inside the enviornment dot T is file that you can see here and we own men's dot TS inside that I am going to add one more property firebase config and I will paste the connection object it is here then back to AB dot module dot ES file here now inside this app module we have to configure firebase project using angular 5 modules with this connection details here first of all we have to import angular fire module which is from angular fire you have to import angular fire module like this we have to import angular Fastow module also so let me copy this and paste it below that and we will import that from angular fire then files to' and we have to import angular Fastow module now in order to configure the app for firebase project we have to add this angular fire module inside this imports array here and we have to call this function initialize app inside that we have to provide this connection details that we have saved here which is from this constant here so that you can type here at the same time you have this auto prediction here if you click on that it will add the corresponding import statement for the constant here now inside this enemy almond constant we have this power base config property that we have to provide here and we own mint dot firebase config after that we have to add this angular Fastow module also let me copy this and piercing here now let me save all of these modifications here now let's run this application for that you can use this angular CLI command ng so double dash or it will compile and open this application in your default web browser now this is how the fresh angry a7 project looks like in order to design this application I will be using bootstrap so go to this website get bootstrap calm now click on get started now we have to include these CSS and JavaScript preference inside the project so let me copy this CSS reference then back to the application open index dot HTML then we have to paste that just before this head and tag here now let's add the JavaScript reference before this body and tag here let me copy this and paste in here along with this bootstrap we also need phone over some icons so let me search for CDN stash a preference for phone over some icons I will be using this style sheet here back to the project now let's add one more link here inside that I will paste the copied H rough now before continuing with this project let me show you the structure of this application for that I will create one more file here I will name this file as a structure dot txt inside that let me paste the structure of the application that we want to build so first of all we will have this pattern component employees inside that we will have these child components employee and employee lists and here we have the shared folder inside that we have this employee service and employee model cross also without further ado let's create these component model and service classes here for that I'm going to open one more terminal here then now we get inside the project folder first of all I will create this pattern component employees for that you can do this ng G for generate C for component and here we have to create employees component newly created employees component files can be seen inside this employees folder here we have one CSS file HTML file one typescript file along with that we have extra file with extension spec dot TS which is for test purpose we don't need that spec dot T is file so we can remove that from here same for this default component also app component dot stack dot es now let's create these child components employee and employee list for that we can use the previous command with few modifications we have to create the component inside this employees folder here so we can do this employees forward slash employee and if you don't need that test file with extension spec tortillas we can add this flag here spec is equal to false hit enter so here we have the newly created component without this peg dot T is fine like this we have to create one more child component employees so I will use the previous command with few modifications we have to create employee list component hit enter so here is the new component employees now we have to create the service and model class inside the shed photo for that you can use this command ng g for generate s for service we have to create employee service class so we just need to type employee here but we have to create this service class inside the shared folder so we can do this shared for slash employee we have not yet created this shared for inside this project directory this command will create the folder if there is no such folder this service command also create aspect or TS file we don't need that so we can specify that with this black speck is equal to force hit enter so here we have the newly created employee service class inside the shared folder like this we have to create this model class unfortunately there is no specific command to create a model class in angular CLI instead we can use the ng command for class with few modifications so this is what we do ng G for generate then we have to create a class in short you can use CL here we have to create that class inside the shared folder and we will name that class as employee so this ng command for class will create a file with this name employee tortillas as per the best practice or recommendations it will add this model dot T s suffix through that file name for that we can add this flag here type is equal to model hit enter so here we have the model file employee dot model tortillas inside that we have this employee class now back to index dot HTML inside the body tag you can see this component act app root it will be replaced by the default component of an angular application which is app component dot HTML here that means this whole HTML is responsible for this default view of the application here now let's modify this design as per our requirement instead of this default HTML I'm going to add a div with class container from bootstrap inside this div I want to show the parent component HTML which is employees here so corresponding selector is here let me copy this and we want to add a tag for this selector inside this div here now open employee stored component or HTML inside this employees component HTML we want to show child components employee and employee list using bootstrap grid system so first of all we need a div with class row and here we have the first column do with class called md5 like this we need one more column so I will copy this and paste below that so this column will take seven seven plus five we have total twelve columns in grid system inside this first column we want to show the employee component HTML so I will copy the component selector from here and we need to create a tag for this selector like this we have to add employee list component inside the second column here so I will copy this selector from here then make a tag for this selector let me save all of these modifications here then back to the application so here we have the employee component inside the second column we have employee list component inside this first column we will show the form for insert and update operation inside this employee list component we will show a table to list all inserted employee records first of all I will show you how to design the form inside this employee component for that we have to add properties into this model class employee here first of all we have the ID property which is of the type string which is used to uniquely identify a single record or document from the file store collection after that we have full name of the employee after that we have EMP code then we have position finally we have mobile all of these properties are of the type string so I will copy this and pasting here now in order to design the form inside employee component HTML for surfer we have to define a property of this model class inside this component type script file and we have to use that inside this HTML but when we have properties which is to be shared among more than one components we will add that property inside this service class here we will inject this employee service inside this app module tortillas and thereby we are creating a single instance of employee service class and we will share that instance among these components employee and employee list the model property which is to be used for designing the form is to be shared among these components employee and employees so I will add that inside this employee service class here and we will do the injection inside this app module tortillas so let's look how to do that here we have the employee service class here I will create a property form data which is of the type employee class while tapping this employee here you can see this autocomplete inside that we have this employee class if you click on that corresponding employee import statement will be added at the top now let's inject this inside this app module tortillas file here you just need to add employee service class inside these providers are here corresponding import statement will be added at the top now open employee component type script file we have to create a property of the type service class here private service which is of the type employee service class so here we have the service instance which is injected in app module dot ES file now we can use the service class property form data in order to design the form inside this employee component dot HTML let me get rid of this default text h1 with class display for from bootstrap inside that I will name this app as EMP register after that we have the form we don't need this action attribute instead I will add the local reference form is equal to ng form of course inside this form we will have input controls so I want to prevent autocomplete for those input controls from previous posted data for that I will add this autocomplete attribute and I will set it as off first of all I will add a div with class form grew from bootstrap inside the day we will have an input control with class form control form - control we don't need this type attribute by default input controls will have the type text so I will remove this then I will add the name attribute I will set it as full name and then we have to add a local reference full name is equal to ng model from angular now let's define the two-way data-binding for this control for that we have to add this banana symbol here inside that we have ng model which is equal to here we have to provide the property which is to be binded into this input control inside this component type script file we have the single instance of the service inside this service class we have defined this form data property inside that we have the full name of the employee so here we can bind the property like this first of all we have the service inside that we have form data inside that full name since we don't have a label for this input control I will add this placeholder attribute here which is equal to full name like this we have to add three more input text box for remaining properties so let me copy this and pasting below that three times now let's change attributes accordingly first of all we have position EMP core finally we have MoBay now I want to show these input controls for employee code and mobile in a single line for that I will add this deal with class form - draw from bootstrap inside that we can add these two divs here let me cut this and paste here each of these divs here will take the half width of this parent for that we can add this call md6 class from bootstrap so called md6 let me copy this pasting below for the second div here after all we have to add one more deal with class form group which is for submit button so we have a button which is of the type submit it will have classes BTN then BTN LG so that this button will be larger than from its default normal size after that we have this class BTN block so that this button will take the enter width of the parent div here after all I want to add a background color so I will add this class BTN info button text will be submit here we have designed this form using template driven approach from angular in order to work this approach we have to add corresponding module inside this app module dot ES file here first of all I will add the corresponding import statement here we have to import forms module from angular forms now let's add the same class inside this impulse error here now let me save all of these modifications then back to the application boom so here we have the required form for insert and update operation now if you inspect this webpage here you can see if you console errors here it is related to the data binding for this input controls because all of these full-name position and employee code properties are not initialized inside this service class here we just declare this form data as a property of the type employee clause now we have to initialize properties inside this form data and we can do inside this typescript file here for that I'm going to define a new function here reset form it has a single parameter form which is of the type ng form from angular click on this so that it will add the corresponding import statement here inside this function first of all we have to reset the form for that we just need to do this we will call this reset form function from the object form after that we have to reset the property this dot service dot form data and here we have to provide an object with reset values so first of all we have the ID I will set it as null and then we have full name I will set it as empty string after that we have three more properties so I will copy this and pasting below that three times this is for position employee code and mobile now we have to call this function inside this ng on a lifecycle hook here the dot reset form function can be called here for some cases we may not have a value for this parameter for so I want to make this property as nullable here and I will add an if clause here if form parameter is not null then only we have to call the reset form function let me save this back to the application here so we don't have any console error left now before submitting this form I want to show you how to implement validations inside the form I just want to make these full name text box as a required field for that I will add this required attribute for this input control here [Music] just add this required attribute save then back to the application here if you inspect this full name text box here you can see few classes which starts from ng like ng pristine ng invalid and ng touched ng pristine means there is no change of value for this control from its default value means after showing this form there is no change of value for the control and we have ng invalid class means this control is not valid because we have applied the required attribute for the controls so there should be some text inside the control before the form submission then only this control will be valid and we have the final class ng test initially it will have the class ng untouched when we place cursor inside this control it will replace with this class ng touched if I under something inside this control here and the pristine is replaced with ng dirty means there is a change from its default value ng invalid is replaced with ng valid means this control is valid based on these ng classes here we can show violation error indication for the control whenever an input control becomes in I will add a red border around the control for that I will add few CSS rules inside this global stat sheet here Styles door CSS here we have the rule if an input control has these two classes ng touched and invalid we will apply the red border around the control let me save this hello this page if you click inside and click outside ng invalid and ng test will be applied to the control and thereby we have applied the CSS rules here now along with this red border I want to show a validation error message showing this field is required just below the control for that I will add the do just below this input control here we need a deal with class validation error inside that we will have this message this field is required and I want to add the corresponding class styles inside these styles dot CSS here I have already prepared the CSS rules let me paste that here if you leave this div as it is here it will be shown all the time we want to show this deal when this full name textbox is invalid even after you saw focus out from the control so that condition can be applied to this div here using ng if directly from angular ng if and here we have the condition using the local reference full name full name dot full name dot invalid and it is touched let me save this then back to the application initially you can see that this div is hidden let me focus in then focus out so here we have met the condition the control is touched and still it is invalid if I enter something inside the control validation succeeded now finally regarding this form validation I want to disable this button when this form as a whole is not valid that we can do here using disabled attribute we will apply this disabled attribute here based on the condition we will apply this attribute when the form is invalid form dot invalid save then back to the application initially this form is not valid that is why we have a blurred submit button here if I enter a random full name here submit button is enabled now let's submit the form so that we can insert a new record into first row DB so first of all we have to add the submit event for this form here so here we have this submit event when we submit this form we will call this function on submit into that we will pass this form local reference form now let's define this function inside the typescript file function name will be on submit for this function we have a single parameter form it's of the type ng form class first of all I will declare a variable data inside that we have to store the employee details from this form here so here we have the local reference of the form using this form object we can retrieve the values from input controls like this form dot value property will contain an object containing those input controls values now we have to insert this employee record into Fastow DB collection for that first of all we have to create a property of angular Fastow here private Fastow which is of the type angular Fastow now in order to insert the new document into Fastow DB collection we just need to do this this dot Fastow dot collection we need to insert the record into this collection employees and here we just need to call this add function inside that we can pass this data property here after insert or update operation we have to reset this form to its initial State for that we can call this function reset form function reset form into that we have to pass this form object now let me save all of these modifications here now let's try to insert a new employee record now let's submit the form since form is wizard to its initial State insert operation must be successful let me check the fast ODB here hey Lord here we have the employees collection with a single employee record for Ashton Cox in most of the time after insert or update operation I want to show a notification saying operation been successful for that I will be using NPM package ng x toaster in order to install this package we can use this NPM command here back to the application I'm going to open one more terminal here then navigate inside the project folder now let's paste the command here hit enter so here we successfully install the package now back to the NPM page here we have to install this angular animation package also in latest versions of angular this package is already installed that you can see inside this package door JSON file here we have already installed the package angular animations so we can skip that installation after that we have to add the package stylesheet toaster door CSS into the application we have installed this package inside this directory inside that we have this toaster course ASIS now let's add this reference into the project let me copy this and back to the application open angular dot JSON file inside that let me search for styles are here so here we can add that reference now after that we have to add corresponding modules into app dot module dot es these are the modules browser animations module cost module let me copy these are imported meant from here then back to the application open app dot module tortillas file here let me paste those imported men here now we have to add this inside this impose array here after that we have toaster module and from this toaster module we have to call this for root function now let's look how to use this toaster module inside this employee component here for that we just need to create a private parameter here private toaster which is of the type toaster service so when we type the class name here we have the prediction if you click on that it will add the corresponding import statement now let's call the notification from this toaster parameter after this research form here this dot toaster dot success function can be called he will show the message submitted successfully after that we can provide the title for this notification I will set it as e MP register which is the application name now let's check how this notification works first of all we have to save all of these modifications since we have made modifications outside this SRC folder it would be better to restart this server here so in order to stop this over you can use the shortcut ctrl C then type Y hit enter and you can use the same command in G's double dash or after that back to the application here I'm going to insert a new employee here now let's submit the form so here we have the success notification submitted successfully if you check this fast or DB here you can see the newly inserted a quote for Jena jeans now let's look how to list all of these inserted employees inside this Employee List component here okay for that first of all inside this service class here we will define a function to retrieve all of those documents from file store dB in order to work with fast or DB we have to add this private parameter like we have done inside the employee component Fastow which is of the type ankle on file store now let's define the function here get employees now inside the function we just need to do this this dot Fastow dot collection and we have to work with employees collection employees and from that we can call this value changes function here so this value changes function returns an observable containing these employee details here except this ID of the document we need these IDs in order to implement operations like update so instead of this value changes function we will call another function snap shortchanges function so this function will retain an absorber so we can return that absorber from this function here now let's call this function inside the Employee List component here so first of all we have to add the private property for the service class service which is of the type employee service class now we will call the get employees function inside this NGO NIT lifecycle hook here this dot service dot get employees function can be called since this function returns an absorber we can subscribe to that here and here we have the arrow function with a single parameter response since this get employed function returns an observable of the type document change action I will rename this parameter as action array in order to store the employees collection from the observable I will declare a new property here list which is of the type employee model class array employee click on this class and its of the type employee array now we will store the employees or here this dot list is equal to action array dot map function can be called inside that we have the arrow function with single parameter item now inside this function we just need to return an object containing details of employee so we just need to do this item dot dot payload dot dog dot data function can be called so this function will return an object containing these much details not this ID so we have to rotate this ID also so we will do this we will return an object here and we will use the latest these structuring syndics from JavaScript so this object will be restructured and it becomes a property of this outer object here so we can do this ID is equal to item dot payload dot dot dot ID property and we have to cast this object into an employee because we are going to assign this into this employee area here so we can do this has employee Clause now using this list property we can show employees inside an HTML table here so first of all let me get rid of this default HTML insert I will add a table with classes from bootstrap table then table - hoorah first of all we have the t hat but first of all we have the employee name then we have position after that we have mobile finally I will add an extra column for actions like delete now let's add the data inside this t body part here here we have the TR element we are going to I trade this dr as much as employees that we have inside this list property here for that we will be using ng for directory from angular star ng for is equal to let e MP of list so we are going to I trade through this employee array on each iteration current employee will be saved inside this EMP property here inside the first column we will show the full name of employee so we will use the string interpolation from angular e MP dot full name along with this full name I want to show the employee code also so before this full name I will show a EMP code I want to separate these two with and - after that I want to show the position EMP dot position finally we have the mobile after all we have the delete button so I will add this anchor element first of all we have B T and then text danger inside this you don't need this HR of attribute here let me get rid of that inside this anchor element we want to show a phone or some icon so we will do this eye with classes far then far - trash let me save all of these modifications here then back to the application that's it here we have few mistakes with string interpolation I think so we have to add the close race also let me copy this and pissing here save then back to the application here that's it here we have listed all of the employees that we have inserted into this fast or DB collection employees now let's look how to update faster document in order to update an existing employee record users should click on this row here so we will populate the corresponding employed it is inside this left form here before that when we hover on this over here we want to have pointer Casa so I will add this CSS here now we want to add on click events for these TD cells here so back to the component HTML I will add the click even here click and we will call another function on edit into that function we will pass this employee object now let's define this function before that I will add this same function to the rest of the TD cells except the last cell which is for delete operation now let's define this function so here we have the function on edit with a single parameter e MP which is of the type employee model Clause inside this function we just need to fill this corresponding employed it is inside this form here so we can do this this dot service dot form data which is the property that we have binded into this form controls here we will update that with EMP object here instead of assigning this object directly into this forum data property I will make a copy of this one and then assigned to this because when we directly assign this property into this form data whenever we make changes inside this full name here corresponding changes will be shown here also we don't need that so I will make a copy after that we will assign that into this form data property object dot assign function can be called and here we have the first parameter which is an empty object after that we can pass the EMP object here let me save all of these modifications back to the application here now let's select this employee for edit operation so here we have populated corresponding selected employee details okay now if you want to edit the corresponding employee you can make the required changes here then click on the submit button ok so in order to do that we will use the same submit event which we have already wired up here inside that we have already implemented insert operation now we have to accommodate update operation also in order to implement update operation we need document ID which is not the inside this form parameter because we have not yet added that into this form element here so let's add hidden feel inside this form input input will be hidden and we have to add the name local reference and data binding so let me copy this and paste in here now let's make the required changes name will be ID that's it now let me save this then back to the application if you click on this then inspect this input control just about this input element you can see the hidden field inside that we have the corresponding ID of the document now let's implement the update operation inside the submit even initially we have said this ID as now so do the insert operation ID will have the value not so here we have the if clause if form dot value dot ID if it is equal to null we will do the insert operation sorry instead of a lead we have value and here we have the else block inside that we have to implement the update operation in order to update a faster document we just need to do this this dot Fastow dot document function is to be called inside that we have to reference the corresponding document so first of all we have the employees collection inside that we have a document with this given ID so we will concatenate a property here finally we just need to call the update function inside that we have to pass an object of employee containing new details of the fields so we will pass this data variable here but here we have a problem since we are passing this data variable here it contains the ID of the employee also we don't need to mess with ID we just need to update the rest of the fields so it will remove the ID from this data property here for that we just need to call this delete function and we can do this data dot ID is to be removed since we are directly assigning this object into this data variable here whatever changes made inside this data will be reflected inside this form object also so in order to avoid that we will make a copy of the object and then we will assign that into this data variable here so we will do this object dot assign function can be called as a first parameter we have an empty object and then we will pass this form value let me save all of these modifications here then back to the application here in order to check update operation is working for all the fluids here I will add this star suffix to every fields here then submit before so here we have updated all the employee fields now let's look how to delete files to document for that we just need to add click even for this delete icon here so back to the component HTML employee this component HTML and then I will add a click even for this click and inside this click event we will call the function on delete into that function we just need to pass the employee ID now let's define this function inside the typescript file so here we have the anteed function and it has a single parameter ID which is of the type string inside the function we just need to delete that fast or documentary first of all I will confirm the operation so we can call this confirm function inside that we will ask are you sure to to delete this record if you sir confirm the operation then only we will delete the corresponding employee record like we have done in employee component in order to work with files too we have to inject that angular fast oh here so private Fastow which is of the type Angela Fastow now we just need to do this this dot fast or dot document inside that we have the collection employees and we just need to pick a document using this ID here so we can conquer that here after that we just need to call the delete function delete so this will delete the corresponding employer record with given ID after all we have to show the toaster notification so we have to inject the corresponding service class here private toaster which is of the type toaster service class now we can do this this dot toaster dot warning function can be called so that it will have a orange background and inside that we will show this message deleted successfully as a notification title I will set this EMP register let me save all of these modifications here then back to the application now I want to delete this action course record so click on this trash icon here and confirm the operation so here we have successfully deleted the corresponding employer code if you check the fast or dB it should be removed from the also we have left only one employee Geena genes so that's it guys in this video we have implemented files so cut operations with angular 7 you can download this project source code from the github link given below in video description if you found this video helpful please thumbs up this video and for more over some videos like this please please subscribe to my channel quad affection 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: 69,965

Keywords: Angular 7 using Firestore, Angular 7 CRUD operations, Cloud Firestore CRUD using Angular 7, insert update and delete in Angular 7, list records in Angular 7 table, Angular 7 CRUD, Angular 7 tutorial, Angular 7 Firestore tutorial, Angular Firestore update document, Firestore document CRUD Operations, Angular 7 tutorial for beginners, add Firestore to Angular Project, angularfire2 for firestore, CodAffection

Id: 5I6k77uqtLY

Length: 55min 16sec (3316 seconds)

Published: Mon Nov 12 2018