apply data only from header contains by dynamic

Question

I am working with a table, where i require to apply the data visibility only available with header contains throw dynamic. how to achieve this?

here is my example:

columns = ['name', 'age']; //required fields declared. on change I need to update the data as well

html:

<table>
  <tr>
    <th *ngFor="let col of columns">{{col}}</th>
  </tr>
  <tr *ngFor="let item of data"> 
    <td >{{item.name}}</td> //how to apply from header instead of manual
    <td >{{item.age}}</td> //how to apply from header instead of manual
  </tr>
</table>

expecting like :

<tr *ngFor="let col of columns"> 
        <td >{{data('col')}</td> //name value  
        <td >{{data('col')}</td> //age value  
      </tr>
    </table>

Live Demo

SiddAjmera · Accepted Answer · 2019-07-15 02:34:35Z

1

You can loop through the columns too for td. And then on each item, you can access the property for the Object like item[column]

Give this a try:

<table>
  <tr>
    <th *ngFor="let col of columns; let i = index">{{setHeader(col, i)}}</th>
  </tr>
  <tr *ngFor="let item of data">
    <td *ngFor="let column of columns">{{item[column]}}</td>
  </tr>
</table>

answered Jul 15, 2019 at 2:34

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

Collectives™ on Stack Overflow

apply data only from header contains by dynamic

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related