Let’s say that we have data in array e.g tasks = [‘task 5’, ‘task 4’, ‘task 3’, ‘task 2’, ‘task 1’]. Now when we will use ngFor then it will display the data like this:
*ngFor="let task of tasks; let i = index"
Task #{{i}}: {{task}}
Output:
Task 0: task 5
Task 1: task 4
Task 2: task 3
Task 3: task 2
Task 4: task 1
But we want to reverse the order of only the index. In order to do that in ts file of the angular components, define a veriable named as totalTasks: number. Now make it equal to the length of the array like this:
totalTasks: number;
totalTasks = tasks.length;
Now following modifications to the angular *ngFor will do the trick:
*ngFor="let task of tasks; let i = index"
Task #{{ totalTasks - i }}: {{task}}
and now the output will be:
Task 5: task 5
Task 4: task 4
Task 3: task 3
Task 2: task 2
Task 1: task 1