title: Using @input and @output between Angular 2 child components
body: <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>