Is there anyway to show serial number in a table?

Question

I'm currently new angular, so if there is any mistake in my implementation then please let me know,

This my HTML code from component.html file

<table id="table">
   <tr>
     <th>Sl.No.</th>
     <th>Name</th>
     <th>Email</th>
     <th>Phone Number</th>
     <th>Skill</th>
     <th>Gender</th>
   </tr>
   <tr *ngFor = " let i of counter()">
     <td></td> <!-- To print the serial number here -->
     <td>{{nameFromLocalStorage}}</td>
     <td>{{emailFromLocalStorage}}</td>
     <td>{{phoneFromLocalStorage}}</td>
     <td>{{skillFromLocalStorage}}</td>
     <td>{{genderFromLocalStorage}}</td>
     <td>
       <button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
     </td>
   </tr> 
</table>

Here is code for counter() from component.ts file

counter() {
    //TO DO
    //Implementation is remaining,
    return new Array(20);
  }

The counter is supposed to return a value, the value is to be captured by the html file in the *ngFor directive and based on that it should create the required number of rows. Then I wanted to display the serial number in the first column of the table.

According to the code above I'm able to get 20 rows.

Note:- I have seen the solution in CSS and doesn't wish to implement until its the only option left.

My question is that how do I get the serial number there.

From my understanding i in the *ngFor directive should starts from zero so, is there anyway to directly display the value of i it self.

I'll be very glad if you can help me learn and correct my mistake.

Thank you in advance.

Answer 1

Yes you can loop it as simple dont know what your serial no is, if its from array then just use CounterArr.Serial_No.

 <tr *ngFor = " let CounterArr of counter();let i = index;">
     <td>{{i+1}}</td> 
     <td>{{CounterArr.nameFromLocalStorage}}</td>
     <td>{{CounterArr.emailFromLocalStorage}}</td>
     <td>{{CounterArr.phoneFromLocalStorage}}</td>
     <td>{{CounterArr.skillFromLocalStorage}}</td>
     <td>
       <button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
     </td>
   </tr>