CODEWITHSUNDEEP
javascripthtmlangulartypescript
bellotas
bellotas

Reputation: 2471

Dynamic table Javascript - Angular 2

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>

Upvotes: 1

Views: 94

Answers (1)

jriver27
jriver27

Reputation: 880

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>

Upvotes: 2

Related Questions