-1

Lets say I have a structure like below:

<my-table>
    <my-row>
        <my-col>Value 1</my-col>
        <my-col>Value 2</my-col>
    </my-row>
    <my-row>
        <my-col>Value 3</my-col>
        <my-col>Value 4</my-col>
    </my-row>
</my-table>

Now, after page render I would like to have a variable in my-table component with structure like that:

[
  ['Value 1', 'Value 2'],
  ['Value 3', 'Value 4']
]

And any changes which I do on this variable (sorting, filtering etc.) must be dynamically rendered.

How to achieve this?

//edit I cannot do this with nested *ngFor because I want to have other components inside my-col for example bootstrap progress bars etc.

Regards

DilumN
  • 2,889
  • 6
  • 30
  • 44
Michal Bialek
  • 499
  • 1
  • 10
  • 26
  • 1
    See https://angular.io/docs/ts/latest/cookbook/component-communication.html and perhaps http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 – Günter Zöchbauer Feb 17 '17 at 14:53

2 Answers2

0

Simple solution would be to pass array of cols to each row, i.e. my-table component template would be

<my-row ng-repeat="row in rows" cols="row" />

where rows is your array of arrays. And my-row component template would be somethings like

<my-col ng-repeat="col in cols" />

And cols: '=' is two-way binding from my-table to my-row.

  • This solution does not fit to me because I may want to use another components (progress bars, etc.) as col value – Michal Bialek Feb 17 '17 at 15:10
  • @MichalBialek I think thing you want to have now could be achieved with attribute directives, where `my-col` from code above, could be `div` with attribute for your component (e.g. field from object in array) –  Feb 17 '17 at 15:15
0

You have to go with nested *ngFor, the first to get each row and the second one to get the columns in every row: 

<my-table>
   <my-row *ngFor="let row of arr">
       <my-col *ngFor="let column of row">{{ column }}</my-col>
   </my-row>
</my-table>
baha almomani
  • 111
  • 7