How To Changes Current List Positions Next, Previous In Angular

In this blog, you will learn how to changes current list positions next, previous in Angular.

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

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

next(item: string, idx: number) {
    if (idx - 1 < 0) {
        return;
    }
    this.items[idx] = this.items[idx - 1];
    this.items[idx - 1] = item;
}
previous(item: string, idx: number) {
    if (idx + 1 >= this.items.length) {
        return;
    }
    this.items[idx] = this.items[idx + 1];
    this.items[idx + 1] = item;
}

Html Codes

<ul>
   <li *ngFor="let item of items; let idx=index">
      {{ item }}
      <button type="button" (click)="next(item, idx)">Next</button>
      <button type="button"(click)="previous(item, idx)">Previous</button
   </li>
</ul>

Please check the below screen for your reference

 

 

I hope this blog is helpful for you.