Angular & FireStore Application

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

Part 2 of 3: We will create the add-item component and form to add an item to our FireStore using a custom service. We will also implement a service function to delete items from Firebase.

CODE: Code for this project
https://github.com/bradtraversy/angularfs

ANGULAR 4 FRONT TO BACK: $10 COUPON
https://www.udemy.com/angular-4-front-to-back/?couponCode=TRAVERSY010

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia