Reorder Mat List rows onclick of Up & Down Buttons

Question

I need to move up and down Mat List rows on click of arrow button present on each rows. Using drag and drop options with cdk/drag-drop is not required, but can this be done using just buttons. Is there any package available for this or do I need to implement logic for this like updating the array sequence to reflect that.

What is the best way to accomplish this without using drag & drop?

Answer 1

I made a stackblitz which should solve your problem: https://stackblitz.com/edit/angular-om9pgk?file=src/app/table-dynamic-observable-data-example.ts

You only need to add another Column to your mat-table which holds the buttons to move an list element up or down the list. Each button should have a click-handler with the functionality to swap the given element one position up or down the list, see the functions moveUp and moveDown in my stackblitz example.