Create a table based on the row and column numbers and fill it

Question

I have an object which has an array and two properties; rows and columns. I want to draw a table based on these two properties and fill my myObject's array elements into it. But this will be dynamically, because the properties changes from object to another object.

For example the possible combinations might be:

myObject.array   = ["x1","x2","x3","x4"];

myObject.rows    = 2;
myObject.columns = 2; 
// then draw this table
-----------
| x1 | x2 |
-----------
| x3 | x4 |
-----------
    OR
myObject.rows    = 1;
myObject.columns = 4;
// then draw this table
---------------------
| x1 | x2 | x3 | x4 |
---------------------
    OR
myObject.rows    = 4;
myObject.columns = 1;
// then draw this table
------
| x1 |
------
| x2 |
------
| x3 |
------
| x4 |
------
    OR
myObject.array   = [12 elements]    
myObject.rows    = 3;
myObject.columns = 4;
.....................

I've also a pipe to loop by numbers with ngFor:

@Pipe({name: 'fill'})
export class FillPipe implements PipeTransform {
  transform(value) {
    let number = new Array();

    for (var i = 0; i < value; i++) {
      number.push(i);
    }

    return number;
  }
}

Can you guide me to the right direction?

Answer 1

I found a similar question answered here: How to use Angular2 templates with *ngFor to create a table out of nested arrays?