CODEWITHSUNDEEP
htmlangulartypescriptdynamic
thenolin
thenolin

Reputation: 1064

How to dynamically add HTML element/content - Angular

What would be the best way to dynamically add an HTML element, such as another column onto a basic HTML table?

I want to have a button below the table, and if the user were to click the button, the event would add the same amount of rows already in the table and add another column. I would want to support about 5 extra columns being added to the table.

Here's my HTML table as of right now: 

<table>
<thead>
    <tr>
        <th id="row-tag"></th>
        <th id="option-column">Option 1</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td id="row-tag">P</td>
        <td id="option-column">{{ p }}</td>
    </tr>
    <tr id="row-tag">
        <td>
            <app-a-p (saveButtonClick)="toggleAP($event)"
                                  [modModalValues]="modModalValues">
            </app-a-p>
        </td>
        <td id="option-column">
            <div class="input-group input-group-sm">
            $<input
                   *ngIf="toggleAP==true"
                    type="text"
                    name="aP"
                    size="10"
                    disabled
                    value=""
                    />
            <input
                   *ngIf="toggleAP==false"
                    type="text"
                    name="aP"
                    size="10"
                    [ngModel]="con.pA"
                    (ngModelChange)="con.pA = $event" appFormatP
                    (blur)="checkAP($event.target.value);
                            inputTracker.addModifiedValue('Option 1', $event.target.value)"
                    />

            </div>

        </td>
    </tr>
    <tr>
        <td id="row-tag">L</td>
        <td id="option-column">${{l}}</td>
    </tr>
    <tr>
        <td id="row-tag">R</td>
        <td id="option-column">${{r}}</td>
    </tr>
</tbody>
</table>

Upvotes: 0

Views: 1852

Answers (3)

Haijin
Haijin

Reputation: 2666

I think in Angular, you define table based on your data. for example, you have fields array defining columns, and data array defines the what's actually in the table.

 <table >
      <thead>
      <tr>
        <th  *ngFor='let key of this.fields'>{{key}}</th>
      </tr>
      </thead>
      <tbody>
      <tr  *ngFor='let row of this.data ' >
        <td scope="row"  *ngFor='let key of this.fields'> {{row[key]}} </td>
      </tr>
      </tbody>
    </table>

when you need a new column, just push a new field into fields. like

   fields.push('newcolumn');

when you need a new row, just do:

  data.push({col1: '', col2:'', newcolumn: ''});

Upvotes: 2

Sachin Gupta
Sachin Gupta

Reputation: 5321

A good way of generating a table on UI when using angular would be to use 2D-array (row*column) use can have a button using which you can dynamically add values to this array and have another row/column to the table.

Upvotes: 0

Daniel Turcich
Daniel Turcich

Reputation: 1834

Look into the insertRow() and insertCell() functions in JavaScript. This alongside an onClick function that you write will let you edit the table.

Upvotes: 0

Related Questions