Reputation: 59
I am making a simple delete request from my angular app but nothing is happening and no error is appearing. My service code is as follows :
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class TodoService {
todoUrl = 'https://example.herokuapp.com/api/todoDB/';
constructor(private http: HttpClient) { }
getTodo() {
return this.http.get(this.todoUrl);
}
postTodo(todoObject: any) {
return this.http.post(this.todoUrl , todoObject);
}
deleteTodo(id: any) {
const url = `${this.todoUrl}${id}`;
console.log(url); // *** This is printing correct URL
return this.http.delete(url);
}
}
My getTodo() and postTodo() are working completely fine but the deleteTodo() method is not working and also it does not show any error either. When I put the URL from the console.log(url) in postman, it works but it is not working from my app.I am using the following code in my component to access the deleteTodo() method of my service :
removeTodo(i: any) {
this.todoService.deleteTodo(this.todoArray[i]._id);
}
My delete route of server :
// Delete Todo
router.delete('/:id' , (req , res) => {
Todo.findById(req.params.id)
.then((todo) => todo.remove().then(() => res.json({success : true})))
.catch(err => res.json({success : false}).status(404))
});
Upvotes: 1
Views: 312
Reputation: 1501
Modify your code to support catchError
and throwError
using pipe for debugging.
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
deleteTodo(id: any) {
const url = `${this.todoUrl}${id}`;
return this.http.delete(url).pipe(
catchError((err) => {
console.log('error caught in service')
console.error(err);
return throwError(err); //Rethrow it back to component
})
);
}
Upvotes: 0
Reputation: 355
You need to subscribe to the Observable
Code Snippet for your problem:
removeTodo(i: any) {
this.todoService.deleteTodo(this.todoArray[i]._id).subscribe(e=>{
// Callback
// Perform Actions which are required after deleting the id from the TODO
});
}
Additional Reference:
https://www.pluralsight.com/guides/posting-deleting-putting-data-angular
https://angular.io/guide/http#making-a-delete-request
Upvotes: 2