How to create a table 100 x 100 by ngFor (angular 5) in HTML?

Question

How to create table with size 100 x 100 where cell has 5px x 5 px , normal table without Angular Materials ? All cells must be clicked by (click)

Edit: How i can nagvigate to position, np. X x Y in this table ?

Answer 1

    @View({
  template: `
    <table>
      <tr *ngFor="let number of numbers">
        <td *ngFor="let number of numbers">{{number}}</td>
      </tr> 

    </table>
  `
})
export class SampleComponent {
  numbers: any;
  this.numbers = Array.from(Array(100)).map((x, i) => i );
}

Answer 2

In your controller (basically creates an array with 100 numbers):

$scope.numbers = Array.apply(null, {length: 100}).map(Number.call, Number);

In the HTML-template:

<table>
  <tr ng-repeat="i in numbers">
    <td ng-repeat="j in numbers">{{ i + 'x' + j }}</td>
  </tr>
</table>

To style the cells you can use any CSS-method you prefer. Either define a global rule:

td { width: 5px; height: 5px; }

or embed it right into <td> -tag: <td style="width:5px; height:5px"...>