What should be the Html Code

Hello,

Checkout the below HTML Code with dynamic header

  

    

      
{{ header }}
    
  
  

    

      
{{ user[header] }}
    
  

Angular Component code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.css']
})
export class UserTableComponent implements OnInit {
  users = [
    { no: 1, name: 'John Doe', gender: 'male', email: '[email protected]', address: '729 S. Paris Hill St', mobile: 1234567890, salary: 120000 },
    { no: 2, name: 'Sarah Smith', gender: 'female', email: '[email protected]', address: '9003 Lake Street Hinesville', mobile: 1234567890, salary: 170000 },
    { no: 3, name: 'Airi Satou', gender: 'male', email: '[email protected]', address: '848 Old Durham Street Piedmont', mobile: 1234567890, salary: 150000 },
    { no: 4, name: 'Angelica Ramos', gender: 'male', email: '[email protected]', address: '8008 Anderson Drive Titusville', mobile: 1234567890, salary: 190000 },
    { no: 5, name: 'Ashton Cox', gender: 'female', email: '[email protected]', address: '620 East Ave. Dundalk', mobile: 1234567890, salary: 140000 },
    { no: 6, name: 'Cara Stevens', gender: 'male', email: '[email protected]', address: '9641 Delaware Street Camp Hill', mobile: 1234567890, salary: 220000 },
    { no: 7, name: 'Jens Brincker', gender: 'male', email: '[email protected]', address: '83 Pennsylvania Road', mobile: 1234567890, salary: 170000 }
  ];

  headers: string[];

  ngOnInit() {
    if (this.users.length > 0) {
      this.headers = Object.keys(this.users[0]);
    }
  }
}

Thanks 

Vishal Joshi

Hi Vishal

  I don't want to create Static Headers. It should be dynamic & so the columns

Thanks

Hello,

You can use the  HTML code as per the below sample code.

  

    

      
No
      
Name
      
Gender
      
Email
      
Address
      
Mobile
      
Salary
    
  
  

    

      
{{ user.no }}
      
{{ user.name }}
      
{{ user.gender }}
      
{{ user.email }}
      
{{ user.address }}
      
{{ user.mobile }}
      
{{ user.salary }}
    
  

Angular Component you can user like below.

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.css']
})
export class UserTableComponent {
  users = [
    { no: 1, name: 'John Doe', gender: 'male', email: '[email protected]', address: '729 S. Paris Hill St', mobile: 1234567890, salary: 120000 },
    { no: 2, name: 'Sarah Smith', gender: 'female', email: '[email protected]', address: '9003 Lake Street Hinesville', mobile: 1234567890, salary: 170000 },
    { no: 3, name: 'Airi Satou', gender: 'male', email: '[email protected]', address: '848 Old Durham Street Piedmont', mobile: 1234567890, salary: 150000 },
    { no: 4, name: 'Angelica Ramos', gender: 'male', email: '[email protected]', address: '8008 Anderson Drive Titusville', mobile: 1234567890, salary: 190000 },
    { no: 5, name: 'Ashton Cox', gender: 'female', email: '[email protected]', address: '620 East Ave. Dundalk', mobile: 1234567890, salary: 140000 },
    { no: 6, name: 'Cara Stevens', gender: 'male', email: '[email protected]', address: '9641 Delaware Street Camp Hill', mobile: 1234567890, salary: 220000 },
    { no: 7, name: 'Jens Brincker', gender: 'male', email: '[email protected]', address: '83 Pennsylvania Road', mobile: 1234567890, salary: 170000 }
  ];
}

Thanks

Vishal Joshi