title: Angular: How can I delete a user from my json server using aggrid and HttpClient delete?
body: <p>So I am a little lost here. I have a json file where I am getting my data from. I preform a get request and also a few rxjs operators are throw in the mix so that when I add new data, it updates automatically. This data is displayed in my grid like so:</p>
  
  <pre><code>     this.columnDefs = [
        { headerName: 'id', field: 'id', hide: true },
        {headerName: 'First Name', field: 'firstName' },
        {headerName: 'Last Name', field: 'lastName' },
        {headerName: 'Email', field: 'email'},
        {headerName: 'File Type', field: 'fileType'},
        {
          headerName: '',
          field: '_id',
          cellRendererFramework: RemoveButton,
          colId: "params",
          width: 100
        }
  
    ];
  </code></pre>
  
  <p>I have a delete button that appears in each row of my grid. I am trying to get this button to remove the data from the grid and the server with an http.delete request. To my understanding, I would retrieve the rows id, then do something like this in my service class:</p>
  
  <pre><code>    deleteUser(id: number): Observable&lt;void&gt; {
    return this.http.delete&lt;void&gt;(`${this._url}/${id}`).pipe(
      catchError(this.handleErrorObservable))
  }
  </code></pre>
  
  <p>But I am unable to properly retrieve the user id from my data grid. When running this code, I receive an error saying the id is undefined. This would be the same case if I wanted to retrieve the firstName, lastName, etc. I am unsure how to properly retrieve the id from the json server so that I can identify the row, and preform the delete request. I need to somehow have each button in the row obtain the id of that specific row, then remove the data based off that information. If it helps, here is the html of my delete button:</p>
  
  <pre><code>  template: `&lt;span&gt;&lt;button style = "height: 20px" (click)="delete()"&gt; X &lt;/button&gt;&lt;/span&gt;`
  </code></pre>
  
  <p>Thank you!</p>
  
  <p>Edit: Here is the delete button component class:</p>
  
  <pre><code>    @Component({
    selector: 'app-remove-button',
    styleUrls: ['./remove-button.component.css'],
    template: `&lt;span&gt;&lt;button style = "height: 20px" (click)="delete()"&gt; X &lt;/button&gt;&lt;/span&gt;`
  })
  export class RemoveButton implements ICellRendererAngularComp {
    public params: any;
    employee: Employees //Model
    constructor( private service: Service) { }
  
  @Input() id: number;
  
    agInit(params: any): void {
  
      this.params = params;
    }
  
  delete(id) {
    id = this.employee.id;
    this.service.deleteUser(id).subscribe(
      ()=&gt; console.log(`Employee with Id = ${this.employee.id}deleted`),
      (err) =&gt; console.log(err)
    );
  }
  
  refresh() {
    return true;
    }
  
  }
  </code></pre>