Error occurs in the template of component EmployeedetailComponent

Question

I am new at Angular and trying to build a small crud application using this link

https://overflowjs.com/posts/Angular-8-Understanding-Directory-Structure-and-Creating-CRUD-App.html

I have done exactly as it is mentioned. I am getting an error which I cant seem to understand. The error is below :

     ERROR in src/app/employeedetail/employeedetail.component.html:7:110 - error TS2554: Expected 1 
     arguments, but got 0.

     <button pButton type="button" label="Delete" icon="pi pi-times" class="ui-button-secondary" 
     (click)="deleteEmployee()"></button>   

      ~~~~~~~~~~~~~~

      src/app/employeedetail/employeedetail.component.ts:8:16
      8   templateUrl: './employeedetail.component.html'
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component EmployeedetailComponent.

Sharing my files: EmployeeDetail.component.ts :

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Employee } from 'src/entity/employee';
import { Router } from '@angular/router
import { EmployeeserviceService } from '../services/employeeservice.service';

@Component({
selector: 'app-employeedetail',
 templateUrl: './employeedetail.component.html'

})
export class EmployeedetailComponent  {

 // Input variable to display properties of an employee
 @Input() employee: Employee;

// Output variable used to tell the parent component to refesh the employee list after successful 
delete
@Output() refreshEmployeeList: EventEmitter<boolean> = new EventEmitter<boolean>();


// Service injected in constructor
constructor(private employeeService: EmployeeserviceService, private router: Router) { 
}

// Method to edit employee details
editEmployee(){
this.router.navigate(["EditEmployee/"+ this.employee.id]);
 }


 deleteEmployee(employeeToBeDeleted: Employee){
 var result = confirm("Are you sure, you want to delete this Employee?");
 if (result) {
  this.employeeService.deleteEmployee(this.employee.id);
  this.refreshEmployeeList.emit(true);
  this.router.navigate(["Employees"]);
   } 



 }
 }

Employeedetail.Component.html

  <p-card [style]="{width: '360px'}" styleClass="ui-card-shadow">
 <div>{{employee.firstname}} {{employee.lastname}}</div>
 <div>Age: {{employee.age}} Years</div>
 <div>{{employee.designation}}</div>
 <footer>
    <button pButton type="button" label="Edit" icon="pi pi-check" style="margin-right: .25em" 
    (click)="editEmployee()"></button>
    <button pButton type="button" label="Delete" icon="pi pi-times" class="ui-button-secondary" 
    (click)="deleteEmployee()"></button>
 </footer>
 </p-card>

If you want to see anymore files, please visit the mentioned link. Can anybody please help me with this error?

Answer 1

That's because you have defined the method as:

deleteEmployee(employeeToBeDeleted: Employee) {
  ... 
}

but invoke it without passing in an argument to it. Pass in an argument to the function as shown below:

<button pButton type="button" label="Delete" icon="pi pi-times" 
        class="ui-button-secondary" 
       (click)="deleteEmployee(employee)">             <-- change made here
</button>