How to dynamically load data in table's row in Angular 4

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.

columns = [
{ key: 'Username', title: 'User Name', isSortable: true },
{ key: 'FullName', title: 'Full Name', isSortable: true},
{ key: 'Email', title: 'Email', isSortable: true}
];


I have populated table using service call from a component.

constructor(private employeeService: EmployeeService, private router: Router) {
this.Employee = [];
}

private populateEmployee() {

this.employeeService.getPagedEmployees(this.query).subscribe(Result => {
this.Employee = <IEmployeeInterface[]>Result["data"],
this.query.totalItems = Result["count"]
});
}


This calls the Employee from angular service function.

getPagedEmployees(filter): Observable<IEmployeeInterface[]> {

var jsonString = JSON.stringify(filter);
return this.http.get(this.baseUrl + 'GetEmployeeUrl').map((response: Response) => {
return response.json();
})
.catch(this.handleError);
}


I am trying to bind the data table in the template file. Here Employee is array of IEmployeeInterface

Employee: IEmployeeInterface[];


where IEmployeeInterface is

export interface IEmployeeInterface {
Id: number,
username: string,
fullname: string,
email: string
}


The table in which I am binding data is like this.

<table class="table table-bordered table-striped table-hover dataTable">
<tr>
<th *ngFor="let c of columns">
<div *ngIf="c.isSortable" (click)="SortBy(c.key)">
{{ c.title }}
<i *ngIf="query.sortBy === c.key" class="fa"
[class.fa-sort-asc]="query.isSortAscending"
[class.fa-sort-desc]="!query.isSortAscending">
</i>
</div>
<div *ngIf="!c.isSortable">
{{ c.title }}
</div>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of Employee" >
<td *ngFor="let column of columns">
{{data[column.key]}}
</td>
</tr>
</tbody>
</table>


{{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. Dynamically loading columns and data into tables in angular 2

Continue reading...