Using checkbox in Bootstrap table in Angular 2 Typescript

[Rolick]

I am using checkbox in bootstrap table as follows. I just want all the checkboxes to get checked in the table rows when I check the checkbox on the table header of the same column. How do I achieve this without using jquery ?

Following is my html table code:

<div id="grid" class="array-table">
  <table id="tab" class="table table-striped" align="center">
    <thead>
      <tr id="header">
        <th><input #csharpcb type="checkbox" aria-label="..." (change)="csharp = csharpcb.checked"></th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody class="trclass">
      <tr>
        <td><input type="checkbox" aria-label="..."></td>
        <td>Rolick</td>
        <td>19</td>
      </tr>

    </tbody>

  </table>

</div>