Counter of rows in a table

Question

How can I add a simple counter to my table. I d like to store this number in a variable (if it is possible using just HTML)

HTML

<div class="table-responsive">
    <table id="carTable" class="table table-bordred table-striped">
        <thead>
            <th>Car ID</th>
        </thead>
        <tbody>
            <tr *ngFor="let car of cars">
                 <td>{{system.systemID}}</td>
            </tr>
        </tbody>
    </table>
</div>

Check this answer: https://stackoverflow.com/questions/43443963/angular2-ngfor-how-to-count-the-number-of-looping-values — Yosvel Quintero, Dec 12 '17 at 12:23
Here's the [complete list](https://angular.io/api/common/NgForOf#local-variables) of variables you can use. — Kirk Larkin, Dec 12 '17 at 12:28

score 2 · Accepted Answer · answered Dec 12 '17 at 12:19

2

It's very simple actually :

<tr *ngFor="let car of cars; let i = index">
  <td>{{system.systemID}}</td>
</tr>

Now i is your counter !

answered Dec 12 '17 at 12:19

score 0 · Answer 2 · answered Dec 12 '17 at 12:35

You can add a index number with for loop like

<div class="table-responsive">
    <table id="carTable" class="table table-bordred table-striped">
        <thead>
            <th>Car ID</th>
        </thead>
        <tbody>
            <tr *ngFor="let car of cars;let i = index">
                 <td>{{i +1}}</td>
            </tr>
        </tbody>
    </table>
</div>

here your variable is stored as i and it starts with zero index.

Counter of rows in a table

2 Answers2