Angular & FireStore Application - [2] Add & Delete Data

hey guys in the last video we went ahead and set up our fire store we created an angular application we brought in all our dependencies including materialized and font awesome also of course firebase and angular fire we set up all the stuff we need to for angular fire in our app dot module dot ES file we created our service we did a bunch of stuff and ultimately we were able to fetch the an array of items from fire store and display them on the screen now one issue we have is we don't have access to the ID which are going to need later so instead of if we go into our service instead of using value changes we actually want to use snapshot changes and then we need to basically map the the ID so that we have access to it so what I'm gonna do is comment this out I'm going to keep it but just comment it out and instead set this dot items equal to this dot af-s dot collection we want the items collection and then we want to do snapshot changes okay and then in here or from here we're going to say dot map and pass in something here now this sometimes you'll see actions sometimes you'll see changes I like to use changes and we're going to set that to an arrow function alright and then basically we want to return changes and then we're gonna call dot map again and here I'm just going to put a set that to some curly braces we're gonna create a variable called data and set that to that a dot payload dot doc dot data all right you see this stuff comes up and intellisense if you're using I should have mentioned this a while ago I'm using an extension called or is it's right here angular version five typescript snippets okay so I should have mentioned that late earlier because you guys probably haven't been seeing the errors that I have so sorry about that but you should get that installed if we're using angular with vs code all right so Kant's data a payload doc data and then we're going to say we want this as item ok the item comes from our model and then we want to set data dot ID equal to a dot payload dot dot dot ID ok so that's how we can get the ID and then we just want to return data so all that code just did is made it so that in addition to the title and the description we also get the data I'm sorry we also get the ID so let's go ahead and save this if we go to our application it should look the same but if we go to the HTML and let's just for a second change title to ID and save now we can get the ID ok so that that's basically why we just did that it's a little more difficult there's some more code we have to write but we're able to get the ID which we're going to need later on alright so I think the next thing I want to do is add the nav bar which is going to be really easy it's just it's basically a dumb component meaning it has no functionality to it it's just to display so let's go ahead and generate that we're gonna go down here to our terminal and say ngg component it's gonna go in the components folder navbar ok and we'll go to let's see we'll go to the HTML and this is gonna be very very simple because we don't even have any links it's just basically for show so we'll put in a nav tag and then we're gonna have a div with the class of nav - wrapper I'm also going to give it a class of black the default is pink and I don't want pink and then we'll put an a tag here that'll just go to slash and let's see this also should get a class brand logo and center so that we can Center it and then we'll just call this FS item manager and that's it okay so we'll save it let's go back to let's go to our app component so our core app component HTML and we're just gonna put this navbar above the container so it has a selector of app - navbar and save and there we go alright so now we want to generate our form to actually add an item okay so let's go down here and say ngg component it's gonna go in components slash and it's going to be called add dash item alright so now let's go to let's first go to the TS file and we're going to be using the serve the item service so we're gonna bring that in it's gonna be from dot dot slash twice services slash item dot service we also want to bring in our model item oh there we go all right so since we brought in the item service we need to inject it into the constructor so let's say private item service item service okay so let's see this is going to have a property of item which will have a type of item and then we're gonna set it to an object with just an empty title oops empty title and description all right and then that should be good for now let's save this let's go to our HTML for the add item component and we're gonna create our form alright so this form I'm going to put it inside of a card which is a materialized class then we're gonna have a class called card content and inside here we'll have a title I'm going to put that in a span with the class of card title and we'll say add item alright and then we're gonna put in a form form does not need an action we're going to give an an event handler we're gonna say ng submit and set that equal to a function called on submit ok which will create later and then let's also give this a class of call and s-six so basically a six column div and it's the inside here we're gonna have a class of row we're gonna use the materialized grid system we're gonna have two six column divs with the title on one and then the description in the other all right so let's say class input field and also a class of call and also a class of s6 like that all right and then let's see we're gonna have our inputs type of text let's give it a placeholder as well so placeholder will say add title okay now we're going to be using ng model which allows us to bind properties to inputs or to anything really now to use ng model we need to import the forms module into app module TS okay anytime we need to use anything we need to bring it in through here so we're gonna say import forms module and that's from angular so it's from angular slash forms alright now since it's a module it needs to go in imports just like the rest of the modules so forms module alright save that you can close that up for now let's go back to our form and let's add brackets inside brackets we'll have the parentheses and this represents two-way binding all right and we'll say ng-model equals now we want to bind it to if we look at our app I mean I'm sorry our add item component we want to bind it to the item title okay so we're gonna say right here item dot title now we also have to include a name attribute and that's just gonna be title okay and let's see underneath that we're just gonna have a label and that will just say title okay so that's one field now let's copy the div with the class of input field and we're gonna put one right underneath and then this one's gonna be the description okay so we'll change that the ng model will be item dot description and then the name will be description and the label okay and then we just want a submit button so we're gonna go under this div right here we'll say input it's gonna have a type of submit oops value submit and to give it a class of BTN alright let's save it now we're not gonna see it just yet because we haven't we haven't inserted the custom element anywhere or the selector so let's put it in the main app component so let's see we'll go to app component HTML we're gonna go right above the app items and say app add item and save and there we go so now we have our form now if we submit this we'll get an error because it's trying to go to a function called on submit so let's go ahead and create that in our add app component or add item component ts alright so down here we'll say on submit now I'm not gonna do any extensive validation all I just want to make sure that there is a title in the description before it we move on and go through the service to actually add to firebase and all that so let's just do a simple if statement here so we'll say if this dot item dot title is not equal to anything four to nothing and this dot item dot description is not equal to nothing then we can continue all right and what we're gonna want to do is call the item service which we brought in and then a function called add item okay now we're gonna get this red squiggly line if you have your angular typescript extension installed because we don't have an add item function in this service yet alright but we will create it and then we're gonna pass in this dot item okay so hopefully understand what's going on we have our an item property which is this object and when we fill in the form whatever we put in this field will be the title because we're binding it using ng model we're binding it the item dot title to this field we're also binding item dot description to this field so whatever we put in here is going to then be that property and then when we submit we're taking we're first checking the title and description fields of the inputs and then we're calling the service function at item and we're passing in the item which is whatever they put in the form all right so that's what's going on here and then once that's done I just want to clear the fields and we can do that by saying this dot item dot title equals nothing this dot item dot description equals nothing okay so now we want to create this add item so let's go to our service item service and we're gonna go down below the get items and we're gonna say add item okay and then that takes in an item which I'm going to give a type of item which comes in from our model right here alright now this is actually really easy we already have this items collection right here so all we have to do is basically add to that so we can say this dot items collection dot add and then we can pass in the item all right so let's save it that should fix okay and let's go ahead and try it so our title will say item for description we'll say this is item for enter okay looks like we have an issue here cannot read property out of undefined all right so let's see service so this dot items collection dot ad Y oh you know what we just have to go into the constructor and let's see we're gonna go right here and we'll say this dot items collection equals this dot AFS dot collection like that and then yeah and then pass in items okay and then instead of repeating this notice that this and this are the same we can just take that and replace that since that's the same thing which is a little cleaner all right we just we weren't setting the collection to the items collection we brought it in up here we set the type but we didn't actually set it to the collection so that should now work so let's try it again all right enter and there we go item for now if you want to sort this notice how there are there they're not in order I'd like to order them from I guess alphabetical for the for the title so what we can do is we can go see where we just were which is right here AFS collection items and we're going to just put a second parameter in here and we're gonna say ref put an arrow function and we can say ref dot order by we want to order by the title and let's let's order it ace ascending ASC so we'll save that go back and now we have them ordered in the right order alright so it's as easy as that to add to your fire store just calling add and then you know items collection add alright so now what I want to do is the delete now I'm gonna start off by just being able to delete them by double clicking on each one of these because later on we'll have the we're gonna create the icon over here to edit and we're gonna have to start getting into like state we're gonna make it so that we can enter an edit state which will open a form for us to update things like that but I just want to do a simple delete at first so what we'll do is go to our items let's see items component dot HTML where we have our allies right here and we're going to add an event to the li so we're gonna say actually double click dbl click so when we double click it's gonna call a function called delete item now we need to know which which item is actually being deleted so we're gonna pass in two things here one is the event we're gonna say money sign event and then the actual item like that all right so we're gonna save that and then we'll go to our item component TS file and let's create delete item okay and remember it gets in the event and the item okay and then we're gonna call service function so this dot item service dot delete item okay which we haven't created yet but we will and then we'll pass in item save that let's go to our service now this is where we need to deal with the angular fired doc okay because we brought our document angular fire stored document so we're gonna set an additional property right here called item doc we're gonna set it to angular fire store documents and we'll give it a type of item okay and let's see we want to go down to the bottom here and we'll create a function called delete item okay remember that takes in an item we're gonna give it a type of item and then we can say this dot item doc which we just defined above and then we're gonna set this to this dot af-s so angularfire store dot doc and then it needs to know which actual document we're talking about when I say document I mean the item okay the the record I guess so that's going to be these back ticks here so we can use a template string that's going to be in items slash and then the ID so we can put a variable in here like this with a template string and we can take that item and we can get the ID from it so that way it knows what actual item we're talking about now once it knows which item we're talking about we can simply do this whoops this dot item doc dot delete and that should delete it all right so let's save that should fix and let's go ahead and double click for and there it goes if I reload it stays deleted all right so I think that's a good place to stop in the next video we're gonna start on the edit which is probably one of the probably the second hardest thing to do because we need to deal with different states and stuff so we'll get into that next

Channel: Traversy Media

Views: 43,689

Keywords: angular 4 firestore, angular firestore, firebase, firestore, firebase firestore

Id: cwqeyOFcaoA

Length: 21min 10sec (1270 seconds)

Published: Fri Oct 27 2017