To finalize the coding part of the series, we are going to implement the logic for deleting the entity. To do that, we are going to create a form to support this action and send the DELETE request towards our server.

So, let’s dive right into it.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

For the previous part check outCreating Angular4 client side – Angular Update Actions

The source code is available at GitHub .NET Core, Angular 4 and MySQL. Part 15 – Source Code

This post is divided into several sections:

Folder Structure and Routing

Execute the Angular CLI command, which is going to create the required folder structure. Moreover, it is going to import OwnerDelete component inside the owner.module.ts file:

Folder structure Angular Delete Actions

In addition, we have to modify the owner.module.ts file to enable routing for this component:

Furthermore, let’s modify the owner-list.component.html file and owner-list.component.ts file to enable navigation to the delete page:

Handling Angular Delete Actions in the HTML File

To create HTML part of the component, let’s start with the wrapper code:

Inside the div with the col-md-10 well classes, we are going to show all the details from the entity we want to delete:

Right below the <br/> tag, let’s add the buttons:

Finally, we are going to add our custom modal components:

Excellent.

Our HTML part of the component is ready. All we have to do is to implement the business logic.

Handling Angular Delete Actions in the Component File

Modify owner-delete.copmonent.ts file, by importing all the necessary resources and by injecting services in the constructor:

Bellow the constructor, we are going to add the logic for fetching the owner and redirecting to the owner-list component:

Finally, let’s implement the delete logic right below the redirectToOwnerList function:

That is it. We have finished our Angular part of this application. As a result, we have a fully functional application ready for deployment. Therefore, all we have left to do is to prepare Angular files for the production and to deploy the complete application to the Windows and Linux environment.

Conclusion

By reading this post you have learned:

  • How to create HTML part of the delete action
  • How to send the DELETE request to the server

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, we are going to publish this complete application on the Windows environment by using the IIS.


If you have enjoyed reading this article, please leave a comment in the comments section below, and if you want to receive the notifications about the freshly published content we encourage you to subscribe to our blog.