title: How to dynamically load data in table's row in Angular 4
body: <p>I am creating a custom data table for a project using angular 4 where table columns and rows element will be bind dynamically. I have created variables for columns name in typescript file.</p>
  
  <pre><code>columns = [
      { key: 'Username', title: 'User Name', isSortable: true },
      { key: 'FullName', title: 'Full Name', isSortable: true},
      { key: 'Email', title: 'Email', isSortable: true}
  ];
  </code></pre>
  
  <p>I have populated table using service call from a component.</p>
  
  <pre><code>constructor(private employeeService: EmployeeService, private router: Router) {
      this.Employee = [];
   }
  
  private populateEmployee() {
  
      this.employeeService.getPagedEmployees(this.query).subscribe(Result =&gt; {
          this.Employee = &lt;IEmployeeInterface[]&gt;Result["data"],
              this.query.totalItems = Result["count"]
      });
  }
  </code></pre>
  
  <p>This calls the Employee from angular service function.</p>
  
  <pre><code>getPagedEmployees(filter): Observable&lt;IEmployeeInterface[]&gt; {
  
      var jsonString = JSON.stringify(filter);
      return this.http.get(this.baseUrl + 'GetEmployeeUrl').map((response: Response) =&gt; {
          return response.json();
      })
          .catch(this.handleError);
  }
  </code></pre>
  
  <p>I am trying to bind the data table in the template file. Here Employee is array of IEmployeeInterface</p>
  
  <pre><code>  Employee: IEmployeeInterface[];
  </code></pre>
  
  <p>where IEmployeeInterface is </p>
  
  <pre><code>export interface IEmployeeInterface {
      Id: number,
      username: string,
      fullname: string,
      email: string
   }
  </code></pre>
  
  <p>The table in which I am binding data is like this. </p>
  
  <pre><code>&lt;table class="table table-bordered table-striped table-hover dataTable"&gt;
       &lt;tr&gt;
          &lt;th *ngFor="let c of columns"&gt;
              &lt;div *ngIf="c.isSortable" (click)="SortBy(c.key)"&gt;
                  {{ c.title }}
                      &lt;i *ngIf="query.sortBy === c.key" class="fa" 
                               [class.fa-sort-asc]="query.isSortAscending"
                               [class.fa-sort-desc]="!query.isSortAscending"&gt;
                      &lt;/i&gt;
              &lt;/div&gt;
              &lt;div *ngIf="!c.isSortable"&gt;
                      {{ c.title }}
              &lt;/div&gt;
         &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr *ngFor="let data of Employee" &gt;
         &lt;td *ngFor="let column of columns"&gt;
              {{data[column.key]}}
         &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>{{data[column]}} returns empty value. where as Column header is properly being rendered. 
  I tried the method from here but it didn't work in angular 4.
  <a href="https://stackoverflow.com/questions/38810318/dynamically-loading-columns-and-data-in-to-table-in-angular-2">Dynamically loading columns and data into tables in angular 2</a></p>