title: Angular 4, sending data from parent to child component issue
body: <p>Hellou, can someone explain to me how to make this work properly, because I'm not very experienced in using viewChild directives...</p>
  
  <p>Here's the deal, I'm working on a small crud app in angular, and have a populated table with my data, on each row I have a delete button which opens up a small confirm window I've managed to get modal(ngx-bootstrap 3) to open on click, now I have to figure out how to call function from my parent component, my http requests work with button on my table, but not when I try to modify it to open a modal and make a delete request clicking on confirm button...</p>
  
  <p>Here's some code, in my parent app.component.html small table...</p>
  
  <pre><code>     &lt;table style="width:100%" class="table table-striped" 
        id="billing_history_table"&gt;
       &lt;thead class="head"&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr *ngFor="let e of employeelist&gt;
              &lt;td&gt;{{e.firstName}}&lt;/td&gt;
              &lt;td&gt;&lt;a (click)="childModal.show()"&gt;&lt;span class="glyphicon 
        glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
         &lt;/tbody&gt;
        &lt;/table&gt;
  
       &lt;app-modal-component #childModal&gt;
  
       &lt;/app-modal-component&gt;
  </code></pre>
  
  <p>In my app.component.ts which is my parent component</p>
  
  <pre><code>    @ViewChild('childModal') childModal: ModalComponent;
  </code></pre>
  
  <p>This is the function I want to call in my opened modal, from parent comp.</p>
  
  <pre><code>        DeleteEmployee(id: string) {
          this._usermanagementservice.deleteEmployee(id).subscribe(res =&gt; {
              this.LoadAllEmployees();
          })
          }
  </code></pre>
  
  <p>Id is from my DB, not shown in the table, I don't know how to pass it to modal</p>
  
  <p>In child component I have</p>
  
  <pre><code>  @ViewChild('childModal') public childModal: ModalDirective;
  
     show() {
      this.childModal.show();
     }
     hide() {
      this.childModal.hide();
    }
  </code></pre>
  
  <p>And in child component .html</p>
  
  <pre><code>    &lt;div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" 
      role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-sm"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-body text-center"&gt;
              &lt;p&gt;Do you want to confirm?&lt;/p&gt;
              &lt;button type="button" class="btn btn-default" 
      (click)="confirm()"&gt;Yes&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary" 
      (click)="hide()"&gt;No&lt;/button&gt;
          &lt;/div&gt; 
          &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Hopefully, you understand my question, confirm button in child .html should trigger DeleteEmployee function and using Id from my table make delete request...
  I know It has to do something with output and event emiters, but I've got no clue, thanks :(</p>