Angular 2 *ngFor loop illustrating looping through an array of objects to populate an html table

all-time.component.html

<section class="leader-table">
  <h2>All Time Leaderboard</h2>
  <table class="table-hover table-striped">
    <thead>
      <tr>
        <th colspan="2">Camper</th>
        <th>Points in past 30 days</th>
        <th>All time Points</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let camper of campers">
        <td cellpadding="0" cellspacing="0" class="avatar-cell"><img class="avatar" src="{{camper.img}}" alt="camper avatar"></td>
        <td>{{camper.username}}</td>
        <td>{{camper.recent}}</td>
        <td>{{camper.alltime}}</td>
      </tr>
    </tbody>
  </table>
</section>