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

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

angularlist


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions