Creating Full Stack Delete Ad API | Service Booking Project Spring Boot + Angular | #19
When building a service booking project using Spring Boot and Angular, it is important to create a robust API for deleting ads. In this article, we will discuss how to create a full stack delete ad API for our service booking project.
Step 1: Set Up the Backend
First, we need to set up the backend using Spring Boot. We will create a new controller that handles the delete ad functionality. We can use the @DeleteMapping annotation to map a DELETE request to a specific URL. Within the delete ad method, we will retrieve the ad by its ID and then delete it from the database.
“`java
@RestController
@RequestMapping(“/ads”)
public class AdController {
@Autowired
private AdService adService;
@DeleteMapping(“/{id}”)
public ResponseEntity deleteAd(@PathVariable Long id) {
adService.deleteAdById(id);
return ResponseEntity.ok().build();
}
}
“`
Step 2: Set Up the Frontend
Next, we need to set up the frontend using Angular. We will create a service that makes a DELETE request to the backend API to delete the ad. We can use the HttpClient module to send the request and handle the response.
“`typescript
@Injectable({
providedIn: ‘root’
})
export class AdService {
private apiUrl = ‘http://localhost:8080/ads’;
constructor(private http: HttpClient) {}
deleteAd(id: number): Observable {
return this.http.delete(`${this.apiUrl}/${id}`);
}
}
“`
Step 3: Test the API
Finally, we can test the delete ad API by making a delete request from the frontend. We can create a button in our Angular component that calls the deleteAd method from the service when clicked. This will send a DELETE request to the backend API, which will delete the ad from the database.
“`html
“`
With these steps, we have successfully created a full stack delete ad API for our service booking project. This functionality allows users to remove ads from the system, making for a more dynamic and user-friendly experience.
