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

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.