CODEWITHSUNDEEP
angularcommand-line-interface
novice
novice

Reputation: 35

CRUD demo project

I am trying to do a CRUD demo project using angular and in memory web API for HTTP service request. There is no error but the http delete does not work. Component deletes on the client side. I am expecting http delete to remove the data from in memeory web api. Am I doing something wrong?

employeeservice.ts

     delete(employee: Employee): Observable<Employee> {
     const id = typeof employee === 'number' ? employee : employee.id;
     console.log(id);

     const url = `${this.employeesUrl}/${id}`;
     console.log(url);
     return this.http.delete<Employee>(url, httpOptions)
       .pipe(tap(_ => console.log(`deleted employee id=${id}`)),
       catchError(this.handleError<Employee>('deleteEmployee'))
       );
     }

component.ts

    deleteEmployee(employee: Employee): void {
     if (this.employeeService.delete(employee).subscribe()) {
       this.employees = this.employees.filter(e => e !== employee);
     }

     }

Upvotes: 1

Views: 102

Answers (1)

Sourav Dutta
Sourav Dutta

Reputation: 1332

I am trying to do a CRUD demo project using angular and in memory web API for HTTP service request. There is no error but the http delete does not work. Component deletes on the client side. I am expecting http delete to remove the data from in memeory web api. Am I doing something wrong?

If I'm not wrong since you are using angular-in-memory-web-api and setting up a fake backend to respond to the HTTP calls for your demo CRUD app.

Using the words of Fikayo Adepoju in this Medium article:

It’s important to note that all the data and data changes are stored in memory, thus anytime the page reloads, the changes you made to the initialized data are not persisted.

In conclusion, you need a real backend server and database connectivity to perform the actual CRUD.

Upvotes: 2

Related Questions