Dynamically create table of object in Angular 2

Question

I need to dynamically create table of object in angular 2/typescript

Create array of objects

export class AppComponent {
  gameBoard= GAMEBOARD;
}

var size=10;//will be for user enter
var GAMEBOARD=[];
var x=0;
for(var i=0;i<size;i++){
for (var j=0; j < size; j++) {
  if (!GAMEBOARD[i]) {                 
      GAMEBOARD[i] = [];              
  }
  GAMEBOARD[i][j]=new GameField(x);
  x++;
}}

Use in template:

<tr *ngFor="let x of gameBoard">
  <game-field *ngFor="let field of gameBoard[x]" [field]="field" ></game-field>
</tr>

Try to input:

@Component({
  selector: 'game-field',
//  inputs:['field'],
template: '<td >{{field.id}}</td>',
  styleUrls: ['./app.component.css']
})
export class GameFieldComponent{
@Input() field: GameField;
}

How to put all object from GAMEBOARD into table?

(I'm a newbie in web development and Stackoverflow so please for indulgence)

Pankaj Parkar · Accepted Answer · 2016-12-10 11:37:53Z

2

As you place custom-element inside tr tag, it would become invalid html and it will thrown of from table tag. You can only place td, th,etc(only table element in tr) all the other element/ custom element aren't allowed in tr

Rather you should make repeat td and generate content from game-field component. It could look something like below.

Also correct inner ngFor to directive loop over x instead of gameBoard[x]

<tr *ngFor="let x of gameBoard">
  <td *ngFor="let field of x"> 
     <game-field [field]="field"></game-field>
  </td>
</tr>

game-field component Template

template: '{{field.id}}',

edited Dec 10, 2016 at 11:37

answered Dec 10, 2016 at 11:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tyskocz Over a year ago

not work - html not generated, i think this line is wrong <td *ngFor="let field of gameBoard[x]"> , but i dont know how fixed it. When i try gameBoard without [x] table shows corretly (ofcourse without field value). template: '{{field.id}}' in game-field component

user2697852 · Accepted Answer · 2016-12-10 11:02:04Z

0

The problem is that you have the export at the top and you redefine the GAMEBOARD after that. You should move the

var GAMEBOARD = [];

To the top.

Also, using const and let, instead of var would help you avoid these problems.

answered Dec 10, 2016 at 11:02

user2697852

Collectives™ on Stack Overflow

Dynamically create table of object in Angular 2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related