Adding SL number to a angular table

Question

I have the following table where in the table is generated using an array:

<tbody *ngFor="let ques of questArray;let i =index">
<tr *ngif="catId == ques.categoryID">
<td> {{i}} </td>

I need to add a serial number to the column

But the problem is there is an *ngif that will filer the array with different categories So if do {{i}} the numbers now list like

1,2,5,6,7,11

I want to list like 1,2,3,4,5 without break.

Also in the new category, `

I need to restart numbering from 1 instead of continuing.

`

Can i use another *ngFor for serial number, also is it possible to restart the number is each ngif condition

Answer 1

Add a new key in element of questArray.

For example in ts file,

let sno = 1;
for(let i=0; i < questArray; ++i){
  let ques = questArray[i];
  if(this.catId == ques.categoryID){
    questArray[i]['sno'] = sno++;
  } 
}

And use that in template like below,

<tbody *ngFor="let ques of questArray;let i =index">
<tr *ngif="catId == ques.categoryID">
<td> {{ques.sno}} </td>