This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Create, Update & Delete" Lesson
[00:00:00]
>> Speaker 1: And so what this will do is once we start to build out kind of like presentation components, where we just are fitting observable strings in, is that we'll take the observable stream and wrap it and then feed it in that one. So what this will also do is the async pipe when this component is taken off the screen that it will unsubscribe for you.
[00:00:23] And so what we're doing here just to summarize, is that in the project service, we're going, calling all which is returning this HttpClient kit. Which is returning an observable or the result wrapped in an observable. Now in the component, we're calling this, and, let me just take this typing off for now.
[00:00:54] We're saying, return the stream, and assign it to this local variable. Now, we could unwrap it in our component class, but more importantly we can, in our template using this async pipe, unwrap it there. Which is, if this were, for instance, mat-list-item was a child component, then you would pass that in via the input and unwrap it at that point.
[00:01:23]
>> Speaker 1: Couple of different things here, just to wrap this up, is we could do create, which would take a project, return this.httpClient to create, you post. And so this is getting a little crafty right here. And so I'm going to create a convenience method. We'll go getUrl and we're just going to return this, so now what we can do is just go this.getUrl.
[00:02:09]
>> Speaker 1: For now create, we can do a similar thing, this.getUrl, and then just pass in the project.
>> Speaker 1: Now if you wanted to update an object. And so, this is what I like about REST APIs is they are conventional. We can go update and delete.
>> Speaker 1: For update we'll do patch.
[00:02:40] And for delete we'll do delete. The difference is the URL is now going to have an id, so it'll be that forward slash projects with the id on the end.
>> Speaker 1: So I'm going to just call this out here ForId.
>> Speaker 1: In this case, we'll pass in the project id.
[00:03:05] And and in this case, we'll just pass in like a projectId. We won't have to put in the whole payload.
>> Speaker 1: And delete doesn't require a payload, whereas update does. And then let's create this one last convenience method. And we'll go getUrlForId.
>> Speaker 1: Which is then going to call return,
[00:03:50]
>> Speaker 1: getUrl.
>> Speaker 1: There we go, so just abstracting kind of these methods into smaller methods that we can then compose. There we go, and so now.
>> Speaker 2: I think you made a typo down on the last line.
>> Speaker 1: The last line.
>> Speaker 2: ProjectId, it's. For update, for update is different.
[00:04:22]
>> Speaker 1: Yeah, so update is an actual project object. So we give project an id and then we're passing in the project that we want to actually update at the server.
>> Speaker 1: And so now that we have these methods, if we go to, I'll just do one of them here.
[00:04:46] We'll go deleteProject. We'll take the project. And then we'll just go this.projectsService.delete. And we'll pass in the project.id.
>> Speaker 1: And then what I can do is subscribe. And then when I get a result, what we'll do is we'll just rehydrate this, so we'll just go this.get, there is a couple of different ways to do this it just depends on your data structure.
[00:05:27] Typically, these things if you have some mutations or server, you just rehydrate your data structure. So now in our template, if we go into our list item, you'll notice here that we have this close button. Well, click,
>> Speaker 1: Delete, and project.
>> Speaker 1: There we go.
>> Speaker 1: deleteProject.
>> Speaker 1: Now one thing we are going to need to do is, you'll notice here that this button is on this button.
[00:06:16] And we have a click event handler on the list item, and we want to attach a click handler on the delete button. So, if I click on this, it's not really going to trigger my delete method, but that native DOM event is going to bubble up and it's going to trigger this one, as well.
[00:06:38] So, that's kind of weird. And so, what you'll do is you'll go here. Event.stop,
>> Speaker 1: I believe it's ImmediatePropagation.
>> Speaker 1: See if it gives me any hints. I'll tell you what,
>> Speaker 1: Yep, all right. Let me just break this down to the second line so we can read it.
[00:07:09] There we go.
>> Speaker 1: And now if I click this, you can see that it was deleted, and let's do this one. You can see now that we're calling delete, and so let me just boost this up, delete. And there's really no payload, but you can see it's going to projects3, delete.
[00:07:38] And then if we go into our db.json, down here, we can verify that it was indeed deleted because we're down to 2.
>> Speaker 1: So just to summarize,
>> Speaker 1: In our ProjectsService, HttpClient which exposes rest verbs. So, for create, update, and delete, as well as reads, so read is get, create is post, typically I'll use patch for update, and delete for delete.
[00:08:19] Then, it's a matter of getting your endpoints, so getUrl, or get a URL with an ID, and then setting the appropriate payload.