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 Javascriptor 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>

Are you trying to say that you want to render the table on user action instead of rendering it through component life-cycle? — planet_hunter
– planet_hunter, Commented Jan 3, 2018 at 15:00

jriver27 · Accepted Answer · 2018-01-03 15:18:16Z

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>

This is exactly what I was looking for. I totally forgot the *ngIf for the table. Thanks

Collectives™ on Stack Overflow

Dynamic table Javascript - Angular 2

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related