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

Here's my solution for Angular 5.x+:

    

      

        

          
{{ cols.displayName }}
        
      
      

        
 
          

            
          
        
      
    
  

Assuming you have columnsData set up like [{displayName: 'First Name', name: 'name'}, {displayName: 'Last Name', name: 'surname'}] Of course, you can customize those however you need.

You can just interpolate {{ data[col.name] }} instead of using the tag if you don't your fields to be editable.