Introduction

In this blog, we are going to see how to move the current list value to the next or previous position in the list.
I have items list values
  1. items = ["List1", "List2", "List3", "List4", "List5"];
Here I have mentioned the next and previous click event changes the list of position index values based on selected list click. Please check the below code
  1. next(item: string, idx: number) {
  2. if (idx - 1 < 0) {
  3. return;
  4. }
  5. this.items[idx] = this.items[idx - 1];
  6. this.items[idx - 1] = item;
  7. }
  8. previous(item: string, idx: number) {
  9. if (idx + 1 >= this.items.length) {
  10. return;
  11. }
  12. this.items[idx] = this.items[idx + 1];
  13. this.items[idx + 1] = item;
  14. }
Html Codes
  1. <ul>
  2. <li *ngFor="let item of items; let idx=index">
  3. {{ item }}
  4. <button type="button" (click)="next(item, idx)">Next</button>
  5. <button type="button"(click)="previous(item, idx)">Previous</button
  6. </li>
  7. </ul>
Please check the below screen for your reference
How to changes current list positions next, previous in Angular
I hope this blog is helpful for you.