populating a table with angular2 *ngFor?

Question

I'm trying to populate a bootstrap styled table with information retrieved from a get request.

I am getting the information just fine, but it is not being output 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>

view-employee-list component

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

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

and for ref the kind of table I'm trying to duplicate;

w3schools bootstrap table

I thought that the template syntax would be ignored and the dom would interpret what was contained within the template container to be at the 'root' level, however this is not the case.

I'm not sure how to remedy the problem, and was hoping someone could offer some advice?

Answer 1

If you use an attribute selector instead and change the view to only create the columns td inside that 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 adjustment:

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

Then, eliminate the <tr> tags inside the component and make it attribute based `"[view-employee-list]". This way, the tag is part of the template wrapper.