How to add TH into TABLE by checking TD in Angular 2?

Question

I would like to generate automatically thead and th , based on td in the template :

<Datatable>
    <tr #lineSelected *ngFor="let subscription of results">
        <td nameColumn="Nom">{{subscription.name}}</td>
        <td nameColumn="Statut">{{subscription.status}}</td>
        <td nameColumn="Origine">{{subscription.origin}}</td>                           
        <td nameColumn="Date d'ajout">{{subscription.date}}</td>
    </tr>
</Datatable>

Now :

<table>     
  <tbody>
    <tr>
        <td>name1</td>
        <td>status1</td>
        <td>origin1</td>                            
        <td>date1</td>
    </tr    
    <tr>
        <td>name2</td>
        <td>status2</td>
        <td>origin2</td>                            
        <td>date2</td>
    </tr>  
   </tbody>       
</table>

Goal :

<table>
  <thead>
    <th>Nom</th>
    <th>Statut</th>
    <th>Origine</th>
    <th>Date d'ajout</th>
  </thead>  
  <tbody>
    <tr>
        <td>name1</td>
        <td>status1</td>
        <td>origin1</td>                            
        <td>date1</td>
    </tr    
    <tr>
        <td>name2</td>
        <td>status2</td>
        <td>origin2</td>                            
        <td>date2</td>
    </tr>  
   </tbody>       
</table>

Here is my component.ts

 @Component({
    selector: 'Datatable',
    template: `
        <table>
            <ng-content></ng-content>
        </table>
    `,
    styleUrls: ['./datatable.component.css']
  })
  export class DatatableComponent {

  }

How can I do that please ?

Answer 1

There is still a room for improvement in your DataTable compoment, but I can get to that later. However, to achieve your specific usecase, one of the things you can do is:

some-consumer.component.ts

This would be the component where you are consuming the DataTable component.

@Component({
  selector: 'ConsumerComponent',
  template: `
    <Datatable>
    <tr>
      <th *ngFor="let header of headers">{{ header }}</th>
    </tr>
     <tr #lineSelected *ngFor="let subscription of results">
      <td nameColumn="Nom">{{subscription.name}}</td>
      <td nameColumn="Statut">{{subscription.status}}</td>
      <td nameColumn="Origine">{{subscription.origin}}</td>                           
      <td nameColumn="Date d'ajout">{{subscription.date}}</td>
     </tr>
    </Datatable>
   `,
})
export class ConsumerComponent implements OnInit {
  public results = [{
    name: 'foo',
    status: 'none',
    origin: 'qux',
    date: 'some-date-string'
  }, {
    name: 'baz',
    status: 'nil',
    origin: 'nil',
    date: 'some-date'
  }];
  public headers = [] as string[];

  ngOnInit() {
    // If your result array comes from a service, you should have a check first.
    this.headers = Object.keys(this.results[0]);
  }
}

There are of course other ways to do it.