Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 10 Solution Part 2" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott finishes his walk through the challenge 10 solution by adding the ability to POST to the widgets.json file.

Get Unlimited Access Now

Transcript from the "Challenge 10 Solution Part 2" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott: All right, so now we're going to post and create a widget. So there's a lot of ways you can do this. My approach is that we'll use the smart dumb component and actually just have the top layer component be in charge of what methods to call when an action happens in these lower components.

[00:00:22] So what I'm saying is, instead of coming into widget details component and injecting the widget service in here and directly calling the methods in the widget service, instead I only keep the widget service in the top level widgets component. And I subscribe to events like I created here, on the widget's detail, that I fire when certain things happen.

[00:00:47] So let's multiline this thing so you can see what's happening. We'll walk through it. So what I mean by is, the method to actually post the server and get events should be stored only in this top level component here and not in the widgets detail. And then we'll pass those down as events.

[00:01:06] Like this, right? So what we just did was in detail component, oops, where did it go, where did it go, right here. So this fetch widgets right here. We're doing it in here, and we also, what we want to do is we want to create the create widget and the update widget.

[00:01:28] We'll just do the create widget for now. So the create widget is going to be a method. It's going to take in the widget and right now we'll just log the widget.
>> Scott: Cool, so we have this create widget method here that we want to use and subscribe to an event on one of its child components.

[00:01:49] So we want, when the widgets-detail is in the state where it's trying to create a component we want the widgets-detail just to fire an event, an output and pass us the selected widget that it wants to create. And then this top level component will create it. So we do that by subscribing to this event called create that I made, and we'll show you in a minute.

[00:02:08] We use outputs. And I'm saying hey, when this event is fired, call this method createWidget with this given event that's passed in. So now we'll go to Widget Details and we'll see where I did that. So I made an output called it create and it's just an EventEmitter.

[00:02:27]
>> Scott: All right, and then down here on this submit method which is tied to on the form, the ngSubmit or is a submit. I don't know because submit is a valid event, but I know they have ng, we'll play with those two. So it's going to issue the submit method, which then just checks to see if the selected widget has an ID, then, we're trying to update it, I got it backwards.

[00:03:00] If it doesn't have an ID, then you're trying to create it.
>> Scott: And the update and create are both event emitters. So that's why I'm able to assign it to this method here and I can say, method.emit to select a widget.
>> Scott: Could have did an infill statement here, too.

[00:03:25] So again, when the submit happens on the form, this methods going to run, which is going to select either to update or create based on if the selected widget has an ID or not.
>> Scott: And then it's just gonna emit that. Once that is emitted, if we go back into widgets component, it's going to call the statement that is subscribed to here which in this case is called create widget or update widget, passing in that one.

[00:03:52] So let's check it out. So we'll say widget here.
>> Scott: Create,
>> Scott: And update.
>> Scott: So let's see what happens.
>> Scott: Open up the console. So right now it's on create a widget because there isn't a selected widget. So if I type in some stuff. Type in some stuff, clear the console out, and hit save, boom.

[00:04:31] Exactly what we thought was gonna happen, the create method was called with the given selected component. Pretty awesome. Now let's test it out on updates, if I click this update one, now we're in update mode, and if I change the price on this and I hit save. Boom, now we're in the update method.

[00:04:52]
>> Scott: And because that's how I had it set up here, that's what's happening right here. We're switching out between the two outputs. So, now we got that wired up, we know it's good to go. And all we gotta do is tie in the actual service methods to the server to call that.

[00:05:08] So, let's do that right now. So now inside of these methods, instead of logging, what we'll do now, because we have access to the widget's service, we can now use a method that have not created yet, but we'll just act like it exists. We can design our API before we create it which is a really great way to write code I think.

[00:05:24] [LAUGH] It's probably the best way. So we'll say widgetsServices.post. So we're gonna create one so we're gonna do a post request here. And to the URL that we wanna post to, it should already, okay let's define it. Private, no, nevermind, we don't need to do that. WidgetsService, let's call it Create.

[00:05:50] CreateOne(), there we go. And this is going to take a widget. And then, this is also an observable so we'll subscribe to it and we'll just see what the response is.
>> Scott: Cuz obviously we want to wait till the database updates it and then add it to our.

[00:06:11]
>> Scott: Our UI, unless we're making an optimistic UI, which we're not right now. Cool, so, we have that. This thing's freaking out cuz it's like there is no create one method, obviously. So, let's go make that. So, now we get to come back into our service. We'll make a create one method, which takes any widget to create.

[00:06:33]
>> Scott: And then all it's gonna do is just return this.http.post to this.url with the JSON.stringify widget and no options. And then we're going to map the response to response.json, because I believe json servers is truly restful. So on this post I believe it should return the saved instance of the data that we post, which is the exact same data that we posted with an ID property.

[00:07:14] So that's why wanna get that back. So let's see what happens. And actually, let's just be optimistic. Let's assume that this gonna work. Let's just go ahead and update the UI too. So instead of doing console.log, let's just go ahead and update it. We'll say this, we can do this all right here.

[00:07:32] This.widgets.push response.
>> Scott: So let's go ahead and do that. So let's check it out.
>> Scott: So we have one widget in there. We'll create a new one. This is my new widget, it is $300. We hit Save. It added something. [LAUGH] Looks like I got the property names mixed up obviously.

[00:08:08] Let's see. Let's look at the network tab. So we made a post request to widgets. It's just sent back an id. I don't know why it Json server, it just decided to do that but that what it sent back. It sent back an id. We can get around that right quick.

[00:08:25] I can just go a quick merge but I think you guys get the point. It's just an implementation detail of the Json server.
>> Scott: Any questions on that?
>> Speaker 2: Why couldn't you just push widgets instead of the response?
>> Scott: I could push widgets instead of the response but it's like-

[00:08:43]
>> Speaker 2: You still need to put the id in.
>> Scott: Yeah, I can do a quick merge. I can just merge this response with this widget and push it on there. But you wouldn't do that in a real scenario. Because if it didn't save in the database and you updated the UI, then you'd just have to take it off again.

[00:08:58] And you just tease the user. So it's really shitty. Any other questions on this?
>> Scott: Everybody good on HTTP? This is just scratching the surface. There's so much more with observables and stuff. But again, I do highly recommend getting to know observables very, very well. It seems kind of like hard to grasp, and it really is.

[00:09:25] But really if you just break it down to the two operations that are there, which are just like you can observe things. And then the operators which if you ever got heavy in a functional program or use low dash exclusively, it's very similar. It's not that much difficult to wrap your head around.

[00:09:42] So I recommend checking out RX marbles and stuff like that.
>> Speaker 2: Also there's a great course.
>> Scott: Yeah, duh, there's a course by Jafar, so check that one out, it's pretty legit.
>> Speaker 2: Who is a core contributor to R X J S.
>> Scott: Core contributor.
>> Speaker 2: And pretty much who I want to be like when I grow up.

[00:10:02]
>> Scott: [LAUGH] Yeah he's a good guy. Check that out, I watched it, I learned a lot from it. So, I highly recommend it.