How to append data from modal inputs to list on button click in Angular?-CodePudding

so basically I have a create-employee component that is a modal with input fields and an add button.

Then there is the employee-details component in which I have a basic table where i want to add the entry from the create-employee modal.

The employee-details code looks like this:

<body>
  <table>
    <tr>
      <th>name</th>
      <th>phoneNumber</th>
      <th>email</th>
      <th>hourlyRate</th>
    </tr>
    <tr *ngFor="let employee of employees">
      <td>{{employee.fullName}}</td>
      <td>{{employee.phoneNumber}}</td>
      <td>{{employee.email}}</td>
      <td>{{employee.hourlyRate}}</td>
    </tr>
  </table>
</body>

employee.ts model:

export interface Employee {
    fullName: string;
    phoneNumber: string;
    email: string;
    hourlyRate: string;
}

employee-details.component.ts:

employees: Employee[] = [];

I dont know how my add method should look like and dont know how to comunicate between the employee-details and create-employee component.

I am pretty new to stuff like this - any help would be appreciated! thanks

CodePudding user response：

Lookup angular forms. https://angular.io/guide/forms-overview either do it with template form or reactive forms. Most people seem to gravitate towards reactive forms, but both will end up being bound to a FormGroup in your case. this form group you can add to you employee list. Which would be something simple like

addEmployee(employee: Employee){

    employees.push(employee)
}

to start out you could just have a button where you run on click a simple hardcorded version of the employee to see it gets appended.