The main objectives of this article are:
- Create A HTTP Delete Endpoint In NestJS App
- Consume The Delete Endpoint In Angular App
Create A HTTP Delete Endpoint In NestJS App:
Let's implement the delete operation logic in 'SuperHeroesService'.
NestJS_App/src/super-heroes/super-heroes.service.ts:
async delete(id: string) { await this.superHeroModel.findByIdAndRemove(id); }
- Here 'findByIdAndRemove()' method deletes the document from the MongoDB collection.
NestJS_App/src/super-heroes/super-heroes.controller.ts:
import { Body, Controller, Delete, Get, Param, Post, Put } from '@nestjs/common'; import { SuperHeroes } from './schema/super-heroes.schema'; import { SuperHeroesService } from './super-heroes.service'; @Controller('super-heroes') export class SuperHeroesController { constructor(private superHeroService: SuperHeroesService) {} @Delete('/:id') async deleteSuperHero(@Param('id') id:string){ await this.superHeroService.delete(id); } }
- (Line: 9-12) The '@Delete()' decorator makes our method execute only for the HTTP delete requests.
Invoke Delete API In Angular App 'SuperHeroesService':
Let's implement the Delete API call in 'SuperHeroesService'.
Angular_App/src/app/super-heroes/super-heroes.service.ts:
delete(id:string){ return this.http.delete(`http://localhost:3000/super-heroes/${id}`) }
Implement Delete Operation In Angular App:
For deletion, we are going to show a bootstrap modal or popup for users to confirm their deletion. Let's implement our delete logic in 'AllSuperHeroesComponent'.
src/app/super-heroes/all-super-heroes/all-super-heroes.component.ts:
import { Component, OnInit } from '@angular/core'; import { SuperHeroes } from '../super-heroes'; import { SuperHeroesService } from '../super-heroes.service'; declare var window: any; @Component({ selector: 'app-all-super-heroes', templateUrl: './all-super-heroes.component.html', styleUrls: ['./all-super-heroes.component.css'], }) export class AllSuperHeroesComponent implements OnInit { constructor(private superHeroService: SuperHeroesService) {} superHeroes: SuperHeroes[] = []; itemIdToDelete: string = ''; deleteModal: any; ngOnInit(): void { this.deleteModal = new window.bootstrap.Modal( document.getElementById('deleteModal') ); this.getAll(); } getAll() { this.superHeroService.get().subscribe((data) => { this.superHeroes = data; }); } openDeleteModal(id: string) { this.itemIdToDelete = id; this.deleteModal.show(); } delete() { this.superHeroService.delete(this.itemIdToDelete).subscribe(() => { this.superHeroes = this.superHeroes.filter( (_) => _._id !== this.itemIdToDelete ); this.deleteModal.hide(); }); } }
- (Line: 5) Declared window variable type.
- (Line: 17) The variable 'ItemIdtoDelete' is to store the 'id' value of the item to be deleted.
- (Line: 18) The variable 'deleteModal' is to store the instance of the bootstrap modal.
- (Line: 21-23) Assing the bootstrap modal instance to our 'deleteModal' variable.
- (Line: 33-36) The 'openDeleteModal()' method gets invoked by clicking the delete button. Here we open the delete confirmation modal.
- (Line: 38-45) The 'delete()' method invokes the delete API call and on the API success, we will hide our bootstrap modal and also exclude the item from the 'superHeroes' variable.
<div class="container mt-2"> <div class="row mt-2"> <div class="col col-md-4 offset-md-4"> <a class="btn btn-primary" routerLink="/add-super-hero">Create</a> </div> </div> <div class="row row-cols-1 row-cols-md-3 g-2"> <div class="col" *ngFor="let item of superHeroes"> <div class="card"> <img src="{{ item.imageUrl }}" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">{{ item.name }}</h5> <p class="card-text"><b>Franchise:</b> {{ item.franchise }}</p> <p class="card-text"><b>Powers:</b> {{ item.powers }}</p> </div> <div class="card-body"> <a class="btn btn-dark" [routerLink]="['edit-super-hero',item._id]"> Edit</a> | <button class="btn btn-danger" (click)="openDeleteModal(item._id)">Delete</button> </div> </div> </div> </div> </div> <!-- Modal--> <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Warning!</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure to delete the item? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-danger" (click)="delete()">Confirm Delete</button> </div> </div> </div> </div>
- (Line: 18)Added the 'Delete' button and click event registered with 'openDeleteModal()' method.
- (Line: 28-44) Bootstrap modal HTML
- (Line: 40) Added the 'Confirm Delete' button and click the event registered with 'delete()' method.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on NestJS (v9) and Angular(v4). using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-3 | NestJS(v9) | Angular(v14) | MongoDB | CRUD Example
Part-4 | NestJS(v9) | Angular(v14) | MongoDB | CRUD Example
Part-5 | NestJS(v9) | Angular(v14) | MongoDB | CRUD Example
Part-6| NestJS(v9) | Angular(v14) | MongoDB | CRUD
Part-4 | NestJS(v9) | Angular(v14) | MongoDB | CRUD Example
Part-5 | NestJS(v9) | Angular(v14) | MongoDB | CRUD Example
Part-6| NestJS(v9) | Angular(v14) | MongoDB | CRUD
Comments
Post a Comment