Using @input and @output between Angular 2 child components
<p>I have an <code>ng-table</code> which is a child component of my main page. When a row is clicked, it sends the information in that row via <code>onCellClick</code> using an <code>EventEmitter</code>. I'm trying to send this information to another child component. This happens to be a button which is the child of a Bootstrap 4 modal which pops up when a button on the main page is clicked. Just having trouble with the receiving and manipulation of that information.<a href="https://i.stack.imgur.com/SkgD9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SkgD9.png" alt="This is the main page. The Bootstrap modal pops up whe the center button of the set of three is clicked."></a><a href="https://i.stack.imgur.com/F4G4W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F4G4W.png" alt="Bootstrap modal"></a></p>

<p>HTML of child component table:</p>

<pre><code>&lt;ng-table [config]="config"
      (tableChanged)="onChangeTable(config)"
      (cellClicked)="onCellClick($event)"
      [rows]="rows" [columns]="columns"&gt;
&lt;/ng-table&gt;
</code></pre>

<p>HTML for the child component (this appears in the main page's HTML):</p>

<pre><code>&lt;app-datatable (row)="received($event)"&gt;&lt;/app-datatable&gt;
</code></pre>

<p>Typescript for getting and sending the row's data (<code>this.row</code> is the EvenEmitter. <code>data.row</code> is the actual row that's clicked on):</p>

<pre><code>@Output() row: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
public onCellClick(data: any): any {
  let d = data.row.tDataPoint;
  let i = data.row.tICCP;
  let s = data.row.tStartDate;
  let e = data.row.tEndDate;
  let toSend:DataTable = new DataTable(d, i, s, e);
  this.row.emit(toSend);
}
</code></pre>

<p>HTML for the button that is the child component of the Bootstrap 4 modal:</p>

<pre><code>&lt;button type="submit" class="btn" data-dismiss="modal" (click)="onClick($event)"&gt;Delete&lt;/button&gt;
</code></pre>

<p>Typescript for the button child component:</p>

<pre><code>selector: 'deletebutton'
@Input() receivedRow:DataTable;
onClick(message:DataTable){
  this.sender.emit('This is from On Click Deletebutton');
  console.log("On Click Deletebutton");
  console.log(this.receivedRow);
  for (let entry in DPS){
    if (DPS[entry].tDataPoint===message.tDataPoint){
    DPS.splice(parseInt(entry),1);
    }
  }
}
</code></pre>

<p>HTML of the button child component (this appears in the modal's HTML). This is what should actually be receiving the data from the clicked row as input.</p>

<pre><code>&lt;deletebutton [receivedRow]='row'&gt;&lt;/deletebutton&gt;
</code></pre>

<p>Right now in my <code>onClick</code> method is saying <code>receivedRow</code> is undefined. I feel like what is missing is the coordination between <code>[receivedRow]='row'</code> where I have my <code>deletebutton</code> HTML and the <code>onClick</code> function call in the HTML for that child component. Overall, I just want to click a row, click the button to open the delete Boostrap Modal, and have the correct row be deleted I click the <code>Delete</code> button inside the modal. Let me know if something's not clear or more code is needed.</p>

<p>Is there actually a way to communicate between child components like this using @Input and @Output?</p>