Dynamic table Javascript - Angular 2

Question

I m trying to access to some information in a table by HTML and it is working , but I would like to do it after clicking a button and not onInit , so I guess that I need to do it by Javascript or Typescript

It would be perfect to create the table by HTML but filling it by Javascript or Typescript after clicking the button.

The table is the following: HTML

<table id="myTableSystems" class="table table-bordred table-striped">
    <thead>
      <th>{{ 'Checkbox' | translate }}</th>
      <th>{{ 'MappingMult' | translate }}</th>
    </thead>
    <tbody>
      <tr *ngFor="let receiver of testCase.receivers;" class="pointer">
        <td>
          <input type="checkbox">
        </td>
        <td>{{receiver.mappingMult}}</td>
      </tr>
    </tbody>
</table>

Answer 1

In your component.ts file you will need to create a function to fill the object "testCase".

I'm not sure how the component is getting/receiving the data for "testCase". You will need to refactor the logic so that you get the data for "testCase" in the fillData function.

component.ts

  public fillData(): void {
    this.testCase.receivers = [{mappingMult: 'data'}];
  }

component.html

<button type="button" (click)="fillData()" class="">Click To Fill Data</button>

<table *ngIf="testCase" id="myTableSystems" class="table table-bordred table-striped">
  <thead>
    <th>{{ 'Checkbox' | translate }}</th>
    <th>{{ 'MappingMult' | translate }}</th>
  </thead>
  <tbody>
    <tr *ngFor="let receiver of testCase.receivers;" class="pointer">
      <td>
        <input type="checkbox">
      </td>
      <td>{{receiver.mappingMult}}</td>
    </tr>
  </tbody>