Filling a table with angular2 * ngFor?

Question

I am trying to populate a bootstrap table with information obtained from a request for receipt.

I get the information just fine, but it is not displayed in the desired way.

Here is my code;

view component

<div class="col-md-12"> <table class="table table-striped"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <view-employee-list [employee]="employee" *ngFor="let employee of employees" ></view-employee-list> </tbody> </table> </div> 

employee view list component

 <tr> <td>{{employee.name}}</td> </tr> 

However, it does not display the desired result, here is the image of the dom tree;

and for reference to the table I'm trying to duplicate,

w3schools boot table

I thought that the syntax of the template would be ignored, and dom would interpret what was contained in the template container at the “root” level, however this is not the case.

I am not sure how to fix this problem, and was hoping that someone could offer some advice?

Answer 1

If instead you use an attribute selector and change the view to only create those td columns inside this template.

 <div class="col-md-12"> <table class="table table-striped"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr view-employee-list [employee]="employee" *ngFor="let employee of employees" ></tr> </tbody> </table> </div> 

view-employee-list component

 selector: '[view-employee-list]' template: '<td>{{employee.name}}</td>' 

Answer 2

Try something like this setting:

 <tbody> <tr view-employee-list [employee]="employee" *ngFor="let employee of employees"></tr> </tbody> 

Then remove the <tr> tags inside the component and create an attribute based on the “[view-employee-list]". Thus, the tag is part of the template shell.

Answer 3

Here is a tutorial for the ngFor tutorial.

app.component.html file

  <h1>My Custom Table</h1> <hr> <table id="users"> <tr> <th *ngFor = "let column of headers"> {{column}} </th> </tr> <tr *ngFor = "let row of rows"> <td *ngFor = "let column of headers"> {{row[column]}} </td> </tr> </table> 

app.component.ts file

  import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { headers = ["ID", "Name", "Age", "Gender", "Country"]; rows = [ { "ID" : "1", "Name" : "Rahul", "Age" : "21", "Gender" : "Male", "Country" : "India" }, { "ID" : "2", "Name" : "Ajay", "Age" : "25", "Gender" : "Male", "Country" : "India" }, { "ID" : "3", "Name" : "Vikram", "Age" : "31", "Gender" : "Male", "Country" : "Australia" }, { "ID" : "4", "Name" : "Riya", "Age" : "20", "Gender" : "Female", "Country" : "India" }, { "ID" : "5", "Name" : "John", "Age" : "23", "Gender" : "Male", "Country" : "USA" }, { "ID" : "6", "Name" : "Raman", "Age" : "27", "Gender" : "Male", "Country" : "India" }, { "ID" : "7", "Name" : "Mohan", "Age" : "39", "Gender" : "Male", "Country" : "India" }, { "ID" : "8", "Name" : "Shreya", "Age" : "21", "Gender" : "Female", "Country" : "India" } ] } 

Click here for a complete post on how to create a table in Angular using ngFor