title: How do i get a Id value into my delete function in angular 2
body: <p>I have an angular app in which I am trying to delete a table row data using the id of that data. But I am unable to pass the id into the delete function. I am getting undefined when I try this.id how do I get the id value into a function in angular. How do i call a Delete function with id in services? </p>
  
  <p>Component : </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Observable} from 'rxjs';
  import { FormsModule } from '@angular/forms';
  
  import { Employee } from './employee';
  import { EmployeeService} from './employee.service';
  
  @Component({
      selector: 'employee-form',
      templateUrl: './employee-form.component.html',
      styleUrls: ['./employee-form.component.css']
  })
  
  export class EmployeeFormComponent{
      employees : Employee[];
      errorMessage : String;
      id : number;
      firstName : String;
      lastName  : String;
      EmployeeType : String;
      employee = new Employee();
      clicked = false;
      constructor(private employeeservice : EmployeeService){}
      ngOnInit(): void{
          this.fetchEmployees();
      }
          fetchEmployees(): void{
              this.employeeservice.getDetailsFromJson()
              .subscribe( employees =&gt; this.employees = employees,
                                      error =&gt; this.errorMessage = &lt;any&gt;error)
          }
  
          addEmployee(): void{
              this.employeeservice.addEmployees(this.employee)
              .subscribe(employee =&gt; {
                  this.fetchEmployees();
                      this.reset();
                      this.firstName = employee.firstname;
                      this.lastName = employee.lastname;
                      this.EmployeeType = employee.employeetype;
                      this.clicked = false;
                      console.log(this.employee.id)
              }, 
              error =&gt; this.errorMessage = &lt;any&gt;error);
          }
          deleteEmp(id): void {
                  this.employeeservice.delete(id)
                   if (confirm("Are you sure you want to delete " + this.id + "?")){
                  console.log();
              }
          }
  
          private reset(){
              this.employee.firstname = null; 
              this.employee.lastname = null;
              this.employee.employeetype = null;
          }
  
  }
  </code></pre>
  
  <p>Template : </p>
  
  <pre><code>&lt;h3&gt;Employee Details&lt;/h3&gt;
  &lt;div class="container"&gt; 
    &lt;div&gt;
      &lt;table class="table table-stripped table-bordered"&gt;
        &lt;tr&gt;&lt;th&gt;Id&lt;/th&gt;&lt;th&gt;Firstname&lt;/th&gt;&lt;th&gt;Lastname&lt;/th&gt;&lt;th&gt;EmployeeType&lt;/th&gt;&lt;th&gt;Actions&lt;/th&gt;&lt;/tr&gt;
        &lt;tr *ngFor="let employee of employees"&gt;
          &lt;td&gt;{{employee.id}}&lt;/td&gt;
          &lt;td&gt;{{employee.firstname}}&lt;/td&gt;
          &lt;td&gt;{{employee.lastname}}&lt;/td&gt;
          &lt;td&gt;{{employee.employeetype}}&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-default" (click)="deleteEmp(employee.id); $event.stopPropagation()"&gt;Delete&lt;/button&gt;
              &lt;button class="btn btn-default" (click)="updateEmp(); $event.stopPropagation()"&gt; Update&lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div [hidden]="submitted"&gt;
  &lt;div class="container" &gt;
      &lt;h1&gt;Employee Form&lt;/h1&gt;
      &lt;form class="form-horizontal" (ngSubmit) = "addEmployee()" #employeeform="ngForm"&gt;
        &lt;div class="form-group "&gt;
          &lt;label for="firstname" class="control-label col-md-3"&gt;FirstName:&lt;/label&gt;
          &lt;div class="col-md-6"&gt;
          &lt;input type="text" class="form-control col-md-6" id="firstname" required [(ngModel)]="employee.firstname" name="firstname" &gt;
  
  
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="lastname" class="control-label col-md-3"&gt;LastName:&lt;/label&gt;
          &lt;div class="col-md-6"&gt;
          &lt;input type="text" class="form-control" id="lastname" required [(ngModel)]="employee.lastname" name="lastname"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;input type="submit" class="btn btn-success "  [disabled]="!employeeform.form.valid" value="submit"&gt;
  
  
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Service : </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response,Headers,RequestOptions} from '@angular/http';
  import { Observable } from 'rxjs';
  import 'rxjs/add/operator/map';
  import {Employee} from './employee'
  
  @Injectable()
      export class EmployeeService {
              empurl = 'api/employees';
              constructor (private http:Http){}
              getDetailsFromJson():Observable&lt;Employee[]&gt;{
                  return this.http.get(this.empurl)
                          .map(this.extractData)
                          .catch(this.HandleErrorObservable);                        
              }
              addEmployees(employee: Employee): Observable&lt;Employee&gt;{
                  let headers = new Headers({'Content-Type': 'application/json'});
                  let options = new RequestOptions({headers: headers});
                  return this.http.post(this.empurl,employee,options)
                          .map(this.extractData)
                          .catch(this.HandleErrorObservable)
              }
              delete(id : number){
                  console.log(id);
      return this.http.delete(`${this.empurl}/${id}}, options`)
          .map(res =&gt; res.json())
        .catch(this.HandleErrorObservable);
    }
  
              private extractData(res: Response){
                  let body= res.json();
                  return body.data || {}
              }
              private HandleErrorObservable(error : Response | any){
                  console.log(error.message || error);
                  return Observable.throw( error.message || error);
              }
      }
  </code></pre>
  
  <p>Is this the right way to call a delete function ?? </p>