Display array in Angular2 template

Question

My angular2 component has an @Input(): data of type [number,number]. The size of the array is should be determined from the input. How can I now bind the content of this array to a table in html, i.e., the table should be something like this:

<table>
    <tr>
        <td> data[0,0] </td>
        <td> data[0,1] </td>
        ...
    </tr>
    <tr>
        <td> data[1,0] </td>
        <td> data[1,1] </td>
        ...
    </tr>
    ...
</table>

If length of the array is determined from the input, you can define type data like @Input() data: number[];. Can you show example input for easy understand problem? — Jarek
– Jarek, Commented Mar 6, 2017 at 13:26
@Jarek: It is a two-dimensional array of size (n,m). Each entry is an integer. By "the length is determined from input" I mean that the component does not know the size intrinsically, only when it get's the data. — EluciusFTW
– EluciusFTW, Commented Mar 6, 2017 at 13:30
@Jarek I want to bind it in the html template using something like *ngFor, yes. — EluciusFTW
– EluciusFTW, Commented Mar 6, 2017 at 13:35
If that's the two-dimensional array using the wrong type period That's a tuple type — Aluan Haddad
– Aluan Haddad, Commented Mar 6, 2017 at 13:38

Markai · Accepted Answer · 2017-03-06 13:38:25Z

2

You can do this with two *ngFor-Directives:

<table>
    <tr *ngFor="let row of data">
        <td *ngFor="let value of row">{{value}}</td>
    </tr>
</table>

Working Plunkr

answered Mar 6, 2017 at 13:38

Markai

2,0981 gold badge12 silver badges15 bronze badges

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

1 Comment

EluciusFTW Over a year ago

I should have looked at arrays in js closer. I didn't know they are interpreted as an array of arrays, i.e, an array of rows containin the array of cells. Then it is obvious, thank you. I was more thinking like one double-indexed data structure.

Jarek · Accepted Answer · 2017-03-06 13:43:06Z

1

Short example:

Our array:

array = [[1,2],[3,4],[7,7]];

Our template:

<table>
  <tr *ngFor="let rows of array">
    <td *ngFor="let col of rows">{{ col }}</td>
  </tr>
</table>

answered Mar 6, 2017 at 13:43

Jarek

9971 gold badge7 silver badges20 bronze badges

1 Comment

EluciusFTW Over a year ago

Thanks, see my comment to @Markai 's answer.

Collectives™ on Stack Overflow

Display array in Angular2 template

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related