Error occurs in the template of component EmployeedetailComponent

user_13249323 0
Viewed 4908

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?

angular typescript
3 Answers

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>
user_61395270

Check out your method deleteEmployee signature. Your method expect to get an argument of type Employee but in your template you are not providing any argument. You have to delete this argument or pass it inside you template.

Also, don't use var to declare variables. Use let if you are changing value, or const if you are not.

user_128123860

There is a issue in your deleteEmployee method.pass the argument and it will be fixed.

user_111858250
Related