{"id":2526,"date":"2018-04-18T07:30:35","date_gmt":"2018-04-18T05:30:35","guid":{"rendered":"https:\/\/code-maze.com\/?p=2526"},"modified":"2025-01-26T08:50:36","modified_gmt":"2025-01-26T07:50:36","slug":"net-core-web-development-part15","status":"publish","type":"post","link":"https:\/\/code-maze.com\/net-core-web-development-part15\/","title":{"rendered":"Working with Delete Requests in Angular"},"content":{"rendered":"

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 to our server.<\/p>\n

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.<\/a><\/p>\n

So, let\u2019s dive right into it.<\/p>\n

<\/a>Folder Structure and Routing<\/h2>\n

Let’s start by executing the Angular CLI<\/code> command, which is going to create the required folder structure. Moreover, it is going to import the OwnerDelete<\/code> component inside the owner.module.ts<\/code> file:<\/p>\n

ng g component owner\/owner-delete --skip-tests<\/code><\/p>\n

In addition, we have to modify the owner-routing.module.ts<\/code> file to enable routing for this component:<\/p>\n

const routes: Routes = [\r\n  { path: 'list', component: OwnerListComponent },\r\n  { path: 'details\/:id', component: OwnerDetailsComponent },\r\n  { path: 'create', component: OwnerCreateComponent },\r\n  { path: 'update\/:id', component: OwnerUpdateComponent },\r\n  { path: 'delete\/:id', component: OwnerDeleteComponent }\r\n];<\/pre>\n
Furthermore, let\u2019s modify the owner-list.component.html<\/code> file:<\/p>\n
<td><button type=\"button\" id=\"delete\" class=\"btn btn-danger\"\r\n  (click)=\"redirectToDeletePage(owner.id)\">Delete<\/button><\/td><\/pre>\n
And the owner-list.component.ts<\/code> file to enable navigation to the delete page:<\/p>\n
public redirectToDeletePage = (id) => { \r\n  const deleteUrl: string = `\/owner\/delete\/${id}`; \r\n  this.router.navigate([deleteUrl]); \r\n}<\/pre>\n
<\/a>Prepare the Page for Angular Delete Actions<\/h2>\n
To create the HTML part of the component, let\u2019s start with the wrapper code:<\/p>\n
<div class=\"container\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-10 card card-body bg-light mb-2 mt-2\">\r\n      \r\n    <\/div>\r\n  <\/div>\r\n<\/div><\/pre>\n
Inside the div<\/code> element with the col-md-10<\/code> class, we are going to show all the details from the entity we want to delete:<\/p>\n
<div class=\"row\">\r\n  <div class=\"col-md-3\">\r\n    <label for=\"name\" class=\"control-label\">Owners name:<\/label>\r\n  <\/div>\r\n  <div class=\"col-md-7\">\r\n    <span name=\"name\">\r\n      {{owner?.name}}\r\n    <\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"col-md-3\">\r\n    <label for=\"dateOfBirth\" class=\"control-label\">Date of birth:<\/label>\r\n  <\/div>\r\n  <div class=\"col-md-7\">\r\n    <span name=\"dateOfBirth\">\r\n      {{owner?.dateOfBirth | date: 'MM\/dd\/yyyy'}}\r\n    <\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"col-md-3\">\r\n    <label for=\"address\" class=\"control-label\">Address:<\/label>\r\n  <\/div>\r\n  <div class=\"col-md-7\">\r\n    <span name=\"address\">\r\n      {{owner?.address}}\r\n    <\/span>\r\n  <\/div>\r\n<\/div><\/pre>\n
Right below the last div<\/code> element, let\u2019s add the buttons:<\/p>\n
<br>\r\n<div class=\"row\">\r\n  <div class=\"offset-md-3 col-md-1\">\r\n    <button type=\"submit\" class=\"btn btn-info\" (click)=\"deleteOwner()\">Delete<\/button>\r\n  <\/div>\r\n  <div class=\"col-md-1\">\r\n    <button type=\"button\" class=\"btn btn-danger\" (click)=\"redirectToOwnerList()\">Cancel<\/button>\r\n  <\/div>\r\n<\/div><\/pre>\n
<span style="font-family: Georgia, 'times new roman', 'bitstream charter', Times, serif;">That's it.<\/span><\/pre><\/p>\n
Our HTML part of the component is ready. All we have to do is to implement the business logic.<\/p>\n
<\/a>Handling Angular Delete Actions in the Component File<\/h2>\n
Let’s start with the import statements in the owner-delete.copmonent.ts<\/code> file:<\/p>\n
import { HttpErrorResponse } from '@angular\/common\/http';\r\nimport { Router, ActivatedRoute } from '@angular\/router';\r\nimport { ErrorHandlerService } from '.\/..\/..\/shared\/services\/error-handler.service';\r\nimport { OwnerRepositoryService } from '.\/..\/..\/shared\/services\/owner-repository.service';\r\nimport { Owner } from '.\/..\/..\/_interfaces\/owner.model';\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap\/modal';\r\nimport { SuccessModalComponent } from 'src\/app\/shared\/modals\/success-modal\/success-modal.component';<\/pre>\n
Then, let’s create necessary properties and inject services in the constructor:<\/p>\n
export class OwnerDeleteComponent implements OnInit {\r\n  owner: Owner;\r\n  bsModalRef?: BsModalRef;\r\n\r\n  constructor(private repository: OwnerRepositoryService, private errorHandler: ErrorHandlerService,\r\n    private router: Router, private activeRoute: ActivatedRoute, private modal: BsModalService) { }\r\n}<\/pre>\n
Bellow the constructor, we are going to add the logic for fetching the owner and redirecting to the owner-list component:<\/p>\n
ngOnInit(): void {\r\n  this.getOwnerById();\r\n}\r\n\r\nprivate getOwnerById = () => {\r\n  const ownerId: string = this.activeRoute.snapshot.params['id'];\r\n  const apiUri: string = `api\/owner\/${ownerId}`;\r\n\r\n  this.repository.getOwner(apiUri)\r\n  .subscribe({\r\n    next: (own: Owner) => this.owner = own,\r\n    error: (err: HttpErrorResponse) => this.errorHandler.handleError(err)\r\n  })\r\n}\r\n\r\nredirectToOwnerList = () => {\r\n  this.router.navigate(['\/owner\/list']);\r\n}<\/pre>\n
Everything here is familiar from our previous posts.<\/p>\n
Finally, let\u2019s implement the delete logic right below the redirectToOwnerList<\/code> function:<\/p>\n
deleteOwner = () => {\r\n  const deleteUri: string = `api\/owner\/${this.owner.id}`;\r\n\r\n  this.repository.deleteOwner(deleteUri)\r\n  .subscribe({\r\n    next: (_) => {\r\n      const config: ModalOptions = {\r\n        initialState: {\r\n          modalHeaderText: 'Success Message',\r\n          modalBodyText: `Owner deleted successfully`,\r\n          okButtonText: 'OK'\r\n        }\r\n      };\r\n\r\n      this.bsModalRef = this.modal.show(SuccessModalComponent, config);\r\n      this.bsModalRef.content.redirectOnOk.subscribe(_ => this.redirectToOwnerList());\r\n    },\r\n    error: (err: HttpErrorResponse) => this.errorHandler.handleError(err)\r\n  })\r\n}<\/pre>\n
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 production and deploy the completed application.<\/p>\n
<\/a>Conclusion<\/h2>\n
By reading this post you have learned:<\/p>\n