What should be the Html Code

Sign in to answer this question.

• 

  Vishal Joshi2y agoPosted Jul 4, 2024, 8:36 AM

  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
• RR

  Ramco Ramco2y agoPosted Jul 4, 2024, 6:35 AM

  Hi Vishal

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

  Thanks
• 

  Vishal Joshi2y agoPosted Jul 4, 2024, 6:26 AM

  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