Angular & FireStore Application

Angular & FireStore Application [3] – Updating Data & Deploy

hey guys welcome to video number three for our angular and firestore application what we're gonna do now is take care of the update so basically we

want to have a little icon over here we click and then it brings a little drop-down where we can edit the item and also have a delete button even though we can we can already delete by double

clicking but I don't really like that functionality because the user doesn't really know that unless we we somehow put it you know have instructions but I just wanted to quit show you how we

could quickly delete an item before so you can keep that or you can get rid of it it's up to you but let's go to our items component HTML file alright and then we're gonna go basically we want to

add secondary content to the list item so let's see we want to go after the description so right here and we're gonna put in a tag let's just say href equals hash and then

we'll give it a class ok so class is gonna be secondary yes secondary content this is just Potter materialized so secondary content and inside the a we're gonna have an eye tag

with the class of FA and also a class of FA – pencil which will give it a little pencil icon alright and then let's see that pencil icon is going to have an event just gonna have a click event when

we click it it's gonna call edit item we're gonna pass in the event and we're gonna pass in the item itself like that so let's save that see if it shows up ok so we have our pencil if we look at the

console we should get an error when we click it because there is no there is no edit item function yet so let's create that so we'll go over to our items component TS

now we're gonna add a couple properties here now I'm gonna try to explain this we're gonna have a property called edit state our edit state and it's gonna be either true or false it's gonna start

off as false but when we click this we want it to go to true because we want to make it so that if the state is an edit then we want to show a form here okay we also want to set up a property called

item to edit because we need to know which one of these is going to be edited which one to add the form underneath so we need those two extra properties so let's go over here and let's say edit

state and that's going to be a boolean true or false and we're gonna set it initially to false okay we also want item to edit and that's going to be item all right and then let's see when we

call edit item that's going to take in the event and item that we click and we're gonna say this dot edit state equals true okay we're also going to set this dot

item to edit equal to the item that's passed in when we click OK because when we click this right here this pencil icon the item that the current item is gonna go into that function so it's

gonna know which one we want to edit we're gonna set it to that property okay so let's go ahead and save this and then we need to update the interface or the HTML so we want to go underneath this a

tag right here still inside of the LI okay very important that we're still in the LI and we're gonna put a div here all right so we're gonna put a div and we want to put an NG if this is going to

be a conditional okay so ng-if edits state okay we're gonna check that edit state property so if it's true or false now remember when we click on the the pencil icon it's

gonna change the edit state to true okay so when that pencil icon is clicked whatever we show in here is going to show now not only do we want to check the edit State but we want to check to

make sure our check to see which item to edit because we need to know which one you know where to put the form so we're gonna say edit state and item to edit now remember the item to edit is the

whole item it's the object with the ID the tête the title and the description so we want to check the ID and we want to see if it's equal to the current item in the iterations ID okay so going by

this ng4 right here we're gonna check to see if that's the item to edit okay now if it is then we're gonna continue and we're gonna have a form alright so let's see we're gonna say well actually let's

let's just test this out so I'm just gonna say test and save and then if we go over here and I click this pencil there we go test click this one test alright so that's that's perfect but

obviously we don't want to just display tests we want form okay and then this form let's put an NG submit this form is gonna go to a function called update item and then we're just gonna pass in

that particular item okay and then let's see in the form it's gonna be very similar to the add form so what I'm gonna do is go to the add item component HTML I'm gonna grab this whole row

that's in the forum like that I'm gonna copy that and so you go back here paste that in and I just I don't want the labels I'm gonna get rid of that that label and

this label and then the rest is the rest we can pretty much keep because we're a set we're binding item title and item dot description and if we look at the items component TS file we have the

items right here and each one has an item when we fetch them and we loop through them they have an item title and description so those should actually get filled automatically so let me just save

this and if that didn't make any sense basically we hey we have the item title here item dot description they're gonna get put in the form as well all right so let's see let's click on the button here

and you can see the form and it's filled click that item – this is item 2 item 3 this is item 3 good now the submit here I'm going to change that I'm gonna change that to update item I'm also

going to change the color so let's give this a color of orange okay so now if I click update item good and then I also want to delete button next to it so what I'll do is right under the input will

put a button and let's give this a class of BTN and a class of of red and we'll say delete item and then all we're gonna do is call the delete item just like we did up here at the double-click in fact

I'm gonna just cut that out okay I'm gonna cut that out so that so that we don't have the double click anymore and we'll put that on this button except it's gonna be just a

regular click all right save that and now we have our delete we can test it out now we can't close these yet we can go from you know from one item to another but we can't we can't close it

so what I'm gonna do is I'm gonna add another little icon to collapse it back but let's just try the delete so item 3 delete and it goes away all right good so now let's add that

icon to basically fold it back up so I'm gonna go right under the pencil icon up here I'm actually gonna copy it okay and then let's see we're going to set this click to call a function called clear

state it's not going to take anything in though and we're gonna change it to FA compress okay I will save it okay so now we have the compressed now we only want this shown when it when this is expanded

okay we don't want it on all of them just the current expanded one so we're going to give it the same condition that we gave this div we want to check the item to edit and we want to check to

make sure it's an edit state so I'm going to copy this ng-if and put it on this icon and save so now when I click this now you can see the this icon same thing here all right now right now if I

click nothing happens because we didn't create the clear state where is it right here clear state so let's do that real quick cuz that's pretty easy so I'm gonna say clear state

and all this is gonna do really is just set edits date back to false oops let's see set edit state to false and it's gonna set this item to edit equal to null so now click that and if I click

the compress it goes back up good now as it is when if I were to delete just open the console just to show you real quick if I were to delete the item you'll see we get an error down here now it's

saying update item is not a function because basically we deleted this but we still kept the state so what we need to do is after or web right before we delete the item in our component we just

want to call clear state so this dot clear state like that all right so now if I were to add something here and go and delete now we don't get that that error all right

let's add some other stuff here all right so now we have to do actually all we really have left to do is the update okay so when we click this it's going to call update item and you can

see that right here okay we're gonna submit to update item passing in the item so let's go to our component ts file update item okay it's gonna take in item and let's see we're going to call

our service function which we haven't created yet but we will so item service dot update item pass in the item and then we're just going to clear the state okay we want that we

want that form to get folded back up alright and these items here we can actually give these all types of item I don't know why then do that alright so now let's create the update item inside

the service so we'll go back to services item service update item okay that takes an item give it to type and then this is almost identical to the delete so I'm gonna copy this paste that

in we're using the item dock setting it to that particular item and then instead of doing delete we're gonna do update and then we're gonna pass in the new item that's being brought passed in

right here so let's save okay that should fix all right so let's edit item two we'll change it to item TW oh I'll change this to will just say this has been updated click update item so item

two this has been updated if I reload it should stay good all right so we now have full crud functionality with firestore and since we used angular CLI we could easily deploy this so I guess

we could do that in I didn't really plan on it but I guess we could do that so let's go ahead and stop the server and we'll just clear this out and let's do ng build – – prod it's gonna build

everything out into static assets let's see property five oh you know what one second all right so what we're gonna do here is see how we have Environment TS and we

have our firebase stuff in there we're gonna put it in the environment dot prod as well now in if this was a real production app you'd probably want a separate firebase for both one for

development one for production but let's go ahead and stick that in there and then let's go to app dot module TS and let's change right here it's going to be environments vironment dot prod

let's try that and then we'll try this again so ng build dot dash dash prod all right so now if we look in our directory we now have a dist folder with all the static assets now I have a

domain called code skillet which is where I usually do my testing for deployment so I'm going to open up FileZilla and I'm gonna just connect to this code skillet where the hell is it

ok we'll go to our public HTML which there's nothing there and we're gonna just bring everything from that distal der into the public HTML and this is just shared hosting by the way

all right so we'll bring all that over and now let's refresh code skillet and here's our application so it's now deployed let's try to add something here we'll say item 3 this is item 3 enter

there we go if we look at our fire store back-end item 3 ok and just to test the update update that works let's test the delete that works so we now have a deployed

angular application using fire bases fire store platform so hopefully you guys found this helpful and maybe it gave you some ideas for your own applications but yeah that's it

thanks for watching if you liked it please leave a like please subscribe if you're not subscribed to the channel and you like this type of thing and thanks for watching

Part 3 of 3: We will create the edit state so we can update items
in our FireStore through the service. We will also do a quick deployment to a shared hosting account.

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