Angular 9 and Spring Boot CRUD Tutorial – Feature 6 sort expenses by name and amount

Hey in the previous post we discussed filtering expenses based on keyword, in this post, we will sort the expenses by expense name and amount. We will sort the expense name in ascending order and amount in descending order. So let’s begin…




In this post, we will cover the following topics,

  • Javascript sort() method
  • Method chaining

Obviously our first step is to create a dropdown list inside the list-expenses.component.html with two options, Name and Sortby for sorting the expenses.

If you notice we are using NgModel for two-way data binding. Also, we are wiring up the change event to the call listExpenses() method.




We will sort the expenses inside the filterExpenses() which is defined in the list-expenses.component.ts file, we will chain the sorting logic for the filtered expenses.

That’s it for the sorting, now if you run the application, you will see the dropdown inside the list expenses page and you can sort the expenses based on expense name and amount.







You can find the Github repository here

You can find the step by step video series here

 

Leave a Reply

Your email address will not be published. Required fields are marked *