Angular delete button in HttpClient request with Json Server

Question

I would like to delete one employee at the time from the list of Employees.The Observable is set in the employee.service.ts and subscribed in the app.component.ts. There are problems to connect to the id of the employee with the method removeUser(id) in the app.component.html and the error is Property 'id' does not exist on type 'AppComponent'.ngtsc(2339).

I would like to console.log the id when the relative delete button is clicked but I do not know how.
Something like this.employees = this.employees.filter(employ => employ.id !== id) is needed to delete the employee, but I am not sure where to insert it.

employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { EmployeeInterface } from '../types/employee.interface';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  constructor(private http: HttpClient) { }

  getUsers(): Observable<EmployeeInterface[]> {
    return this.http.get<EmployeeInterface[]>('http://localhost:3000/employees')
  }

  removeUser(id: string): Observable<{}> {
    return this.http.delete(`http://localhost:3000/employeers/${id}`)
  }

}

app.component.ts

import { Component } from '@angular/core';
import { EmployeeService } from './service/employee.service';
import { EmployeeInterface } from './types/employee.interface';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'List of employees';

employees: EmployeeInterface[]=[];

constructor(private employeeService: EmployeeService) {

}

ngOnInit(): void {
this.employeeService.getUsers().subscribe(emp => 
  {
this.employees = emp;
    console.log(this.employees)
  })
  
}

removeUser(id: string): void {
  this.employeeService.removeUser(`http://localhost:3000/users/${id}`).subscribe()
}

}

app.component.html

{{title}}

<li *ngFor="let employee of employees">{{employee.name}} <button (click)="removeUser(id)">Delete</button></li>

db.json (used with json server)

{
  "employees": [
    {
      "id": 1,
      "name": "Tim",
      "hired": true
    },
    {
      "id": 2,
      "name": "Jess",
      "hired": true
    }
  ]
}

João Vitor Amorim · Accepted Answer · 2021-11-28 13:49:12Z

1

Ok, there are some problems in your code.

In your HTML template, you are not passing the employee ID in the button click output. Because of this you are getting the mentioned error. Your HTML code must be like:

<button (click)="removeUser(employee.id)">Delete</button>

In AppComponent.removeUser, you are passing the complete URL to the service method. You only have to pass the id, like below:

removeUser(id: string): void {
   this.employeeService.removeUser(id).subscribe()
}

You must do the mentioned filter only if the delete request have been successful. For achieve this, your AppComponent.removeUser will be like this:

removeUser(id: string): void {
   this.employeeService.removeUser(id)
      .subscribe(() => {
         this.employees = this.employees.filter(employ => employ.id !== id)
      })
}

To console.log your employee ID, modify again the method:

removeUser(id: string): void {
   console.log(`ID of the employee to be removed: ${id}`)
   this.employeeService.removeUser(id)
      .subscribe(() => {
         this.employees = this.employees.filter(employ => employ.id !== id)
      })
}

Your AppComponent.removeUser can be improved to show a error message to the user if the request fail and a success message too:

removeUser(id: string): void {
   console.log(`ID of the employee to be removed: ${id}`)
   this.employeeService.removeUser(id)
      .subscribe({
         next: () => {
            this.employees = this.employees.filter(employ => employ.id !== id)
            console.log(`The employee with ID = ${id} have been removed.`)
            // TODO - Show the success message for the user.
         },
         error: () => {
            console.log(`An error occurred when trying to remove the employee with ID = ${id}.`)
            // TODO - Show the error message for the user.
         }
       })
}

answered Nov 28, 2021 at 13:49

João Vitor Amorim

611 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lacertezzadellapena Over a year ago

Thank you for your clarity to explain step by step what to do. Unfortunately it throws error. For instance when button 2 is clicked in console shows: DELETE http://localhost:3000/employeers/2 404 (Not Found)

lacertezzadellapena Over a year ago

It shows the other 2 console logs: -ID of the employee to be removed: 2 -An error occurred when trying to remove the employee with ID = 2.

João Vitor Amorim Over a year ago

I think there is a typo in the request URL, because in your EmployeeService.getUsers you are using "localhost:3000/employees", and in EmployeeService.removeUser you are using "localhost:3000/employeers". Try changing this "localhost:3000/employeers" to "localhost:3000/employees" (without the 'r' letter). It solves the problem?

lacertezzadellapena Over a year ago

Well spotted, it works perfectly now. Thank you for that!!! How can I implement the handling error part (// TODO - Show the error message for the user)? Do you mean like adding a message in the DOM?

lacertezzadellapena Over a year ago

Thank you for that. It is beyond the scope of this question, yet this very interesting ;) Now I will try to do add an employee to my App. fingers crossed

|

Vítor França · Accepted Answer · 2021-11-28 13:46:58Z

0

It's because on your html file you are calling a function using a variable named 'id', that is supposed to exist in your component file, that's why you are getting that error.

Instead, you need the id of the employee that you are getting at that time from the ngFor, so you need this:

<li *ngFor="let employee of employees">{{employee.name}} <button (click)="removeUser(employee.id)">Delete</button></li>

Just like you did with the name of the employee.

answered Nov 28, 2021 at 13:46

Vítor França

7579 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular delete button in HttpClient request with Json Server

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related