Generate Dynamic Table In Angular

A dynamic tables is a table that changes it’s number of rows depending on the input received by form. In this blog we are using multiplication table as an example.

Step : 1 –  app.component.html

<h4>Generate Dynamic Table In Angular </h4>
<input type="number" placeholder="enter number" [(ngModel)]="number" />
<button (click)="generateTable()">Generate</button>
<table style="width:100%" border="1">
    <ng-container *ngFor="let row of tableRow;let index=index;let lastRow = last">
        <tr>
            <td *ngFor="let col of tableCol;let indexcol=index;">{{(indexcol+1)*(index+1)}}</td>
        </tr>
    </ng-container>
</table>

Step : 2 –  app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name = 'Angular'; number = 0; colSum = []; tableRow = new Array(10);

  generateTable() {
    this.tableCol = [];
    for (let ii = 1; ii < this.number + 1; ii++) {
      this.tableCol.push(ii);
    }
  }
}

Step : 3 – npm start