How to send data from One Component to another Component on button click in angular 2

Question

So I have the following Code that displays the table on main page and I have two buttons for each row in the table, "Edit" and "Delete". So when I click the Edit button the modal is opened. Now my question is that I need to pass the "employee id" on button click of a particular employee to the . How can I do this? So lets say I have an empoyee with id: "101" and want to edit information , how to pass this "101" to the edit modal component on Button Click so that I can populate the detials of that employee in text boxes in my modal?

@Component({
      selector: 'ops-employee',
      pipes: [],
      styles: [],
      template: `
          <ops-addmodal [(open)]="addEmployeeOpen" (check)="updateEmployeeList($event)"></ops-addmodal>
          <ops-editmodal [(open)]="editEmployeeOpen" [data]="editId" (check)="editEmployeeList($event)">
          </ops-editmodal>
          <div class="col-md-8 col-md-offset-2">
          <h1> Employee Info </h1>
          <hr>
          <button class="btn btn-lg btn-primary" (click)="addEmployee()">Add</button>
          <table class="table table-striped">
           <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Role</th>
              <th>Actions</th>
            </tr>
           </thead>
           <tbody>
            <tr *ngFor = "#employee of employeeDetails">
              <td>{{employee.empName}}</td>
              <td>{{employee.empAge}}</td>
              <td>{{employee.empRole}}</td>
              <td>
              <button class="btn btn-sm btn-default" (click)="editEmployee(employee.empId)">Edit</button>
              <button class="btn btn-sm btn-danger" (click)="deleteEmployee(employee.empId)">Delete</button>
              </td>
            </tr>
           </tbody>
          </table>
          </div>
        `,
      directives: [AddEmployeeModalComponent, EditEmployeeModalComponent, ModalComponent]
    })

Answer 1

So as far as i understood your code snippet, you have another component which opens the modal to edit your Employee EditEmployeeModalComponent , which is probably this element <ops-editmodal ...

Then what you could do is use @ViewChild to get the instance of this component and call a public function of it.

First you have to add an id to your component <ops editmodal #myEditModal ...

Then in your main Component:

export class MyComponent {

     @ViewChild('myEditModal')
     private _editModal:EditEmployeeModalComponent;

     editEmployee( employeeId:number ):void {
         this._editModal.open( employeeId );
     }
 }

and in your EditEmployeeModalComponent you have this open(id:number) function which sets your model (or whatever you use for your form) and opens your modal.

Hope this helps.