title: dynamic property binding in a table in angular 6
body: <p>Good Afternoon,</p>
  
  <p>I am beginning Angular. I want to make a table that I expect to use in many locations in my applications. </p>
  
  <p>This table will be a child component of many parent components and thus I want these components to pass the table an array of headers and an array of lines.</p>
  
  <p>Here is an example of the parent ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder } from '@angular/forms';
  import { PrestationService } from '../services/prestation.service';
  
  @Component({
    selector: 'app-prestation',
    templateUrl: './prestation.component.html',
    styleUrls: ['./prestation.component.css']
  })
  export class PrestationComponent implements OnInit {
  
    constructor(private fb:FormBuilder, private prestationService:PrestationService) { }
  
    TITLE:String = "Créer une prestation"
    headers = ['libelle', 'Montant', 'Valable jusqu\'au']
    prestations;
    form:FormGroup;
    msg;
  
    ngOnInit() {
      this.loadPrestations();
      this.form = this.fb.group({
        libelle:'',
        montant:'',
        date_validite: new Date()
      })
    }
  
    addPrestation(data){
      this.prestationService.add(data).subscribe(
        data =&gt; this.msg = data,
        err =&gt; this.msg = err
      )
      this.loadPrestations();
    }
  
    loadPrestations(){
      this.prestationService.getPrestations().subscribe(
        data =&gt; this.prestations = data,
        err =&gt; this.msg  = err
      )
    }
  
  }
  </code></pre>
  
  <p>parent .html (minus unnecessary information)</p>
  
  <pre><code>&lt;div class="container tbl-borders spacer"&gt;
      &lt;app-view-title [title]="this.TITLE"&gt;&lt;/app-view-title&gt;
      &lt;app-view-table [headers]="this.headers" [rows]="this.prestations"&gt;&lt;/app-view-table&gt;
  </code></pre>
  
  <p>In the html stuff, I pass the array of headers hardCoded in my .ts and an array of object populated directly from my database.</p>
  
  <p>In the child component i retrieve the 2 tables and there i am stuck. I looked around the internet to find solutions but noned fitted what I expect to do in the end.</p>
  
  <p>here is the child component.ts :</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-view-table',
    templateUrl: './view-table.component.html',
    styleUrls: ['./view-table.component.css']
  })
  export class ViewTableComponent {
  
    private _headers:String[];
    private _rows:Array&lt;Object&gt;;
  
    @Input()
    set headers(headers:String[]){
      this._headers = headers
    }
  
    @Input()
    set rows(rows:Array&lt;Object&gt;){
      this._rows = rows;
    }
  
    get headers(){return this._headers}
    get rows(){return this._rows};
  
  }
  </code></pre>
  
  <p>and the html :</p>
  
  <pre><code>&lt;table class="table table-stripped table-hover table-sm"&gt;
    &lt;thead &gt;
      &lt;th *ngFor="let header of headers"&gt;{{header}}&lt;/th&gt;
      &lt;th&gt;Action&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let row of rows, i as index"&gt;
        &lt;td&gt;{{row.libelle}}&lt;/td&gt;
        &lt;td&gt;{{row.montant}}&lt;/td&gt;
        &lt;td&gt;{{row.date_validite}}&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="row"&gt;
          &lt;button class="btn btn-outline-success btn-sm "&gt;edit&lt;/button&gt;
          &lt;button class="btn btn-outline-success btn-sm "&gt;Delete&lt;/button&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The table headers are working as expected but the rows are not, I tried with keyvalue pipe but the data comes unordered and won't fit the right column header. Above html is incorrect because if i have to explicitely name each property (such as libelle, montant, etc...) this table component couldn't be used everywhere , it will depend on the array property names i will pass into that component argument.</p>
  
  <p>Hope you understand my problem and that you can put me on the right way.</p>
  
  <p><strong>EDIT</strong>
  Here is the dynamic table after correction :</p>
  
  <pre><code>&lt;table class="table table-stripped table-hover table-sm"&gt;
    &lt;thead &gt;
      &lt;th *ngFor="let header of headers"&gt;{{header.titreColonne}}&lt;/th&gt;
      &lt;th&gt;Action&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let row of rows"&gt;
        &lt;td *ngFor="let header of headers"&gt;
          {{row[header.key]}}
        &lt;/td&gt;
        &lt;div class="col-sm-4 row"&gt;
            &lt;button class="btn btn-outline-success btn-sm " *ngFor="let button of buttons" (click)="buttonEvent(button, row.id)"&gt;{{button}}&lt;/button&gt;
         &lt;/div&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I modified my header array as such</p>
  
  <pre><code> headers = [
      {titreColonne:"Libellé", key:"libelle"},
      {titreColonne:"Montant € HT", key:"montant"},
      {titreColonne:"Date Fin validité", key:"dateFinValidite"}
    ]
  </code></pre>