Dynamically loading columns and data in to table in Angular 2

Question

I have an HTML page in which I want to create a table. The columns in this table are dynamic which means that they are fetched from the server into a variable in the compone

Answer 1

This is for those who don't want table

Header model:

public tempData: any[] = [{
  header: 'Import',
  field: 'import'
}, {
  header: 'Receive:',
  field: 'receive'
}, {
  header: 'Send',
  field: 'send'
}],

Actual data:

public actaulData: any[] = [
{ send: 'send to data', import: 'import data', receive: 'receive data'}]

View:

      

        

          

            {{ item.header }}: {{ data[item.field] }}