How to sort record using Angular 6 and ASP.NET Core 2.0

Build an app with ASPNET Core and Angular from scratch

In this tutorial, we will discuss how to sort record using Angular 6 and ASP.NET Core. We will create generic logic using Dictionary for sorting the record. There are lots of other techniques or third-party tools like ng2-table, ngx-data table and others. But we will create our own logic.

Previous Tutorials of Angular 6 and ASP.NET Core Series

Note:- In this tutorial, we will not create a new project. We will add changes in our previous project which we have created in one of the previous tutorials.

Step # 1 => Add properties to model class

First-of-all, we will add properties in our model. So, go to project folder structure => then model => and then open “Filter.cs” class.

Then add the below properties in the filter model class.

public string SortBy { get; set; }

publicbool IsSortAscending { get; set; }

Step # 2 => Add properties to resource class.

Now, go to project folder structure => then Controllers=> and then open “FilterResource.cs” class.

Then add the below properties in the filter Resource class.

public string SortBy { get; set; }

public bool IsSortAscending { get; set; }

Step # 3 => Add Interface

Now, in this step, we will add the interface with the name of IQueryObject. So, to do this, just open the terminal window and then create a new folder using this below command.

mkdir Extensions

After creating the Extensions folder, just right click the folder and add a new interface with the name of “IQueryObject”. Then add the code as you see in below file.

Note:- Don’t forget to inherit the filter class from IQueryObject interface.

READ What are Components in Angular 5

Step # 4 => Add logic for Sorting

Now in this step, we will add a new class with the name of IQueryExtensions under the “Extensions” folder. So, go to project folder structure => then right click on the newly created folder “Extensions” => then choose option “New C# Class” => then add the name (E.g. IQueryableExtensions) => then add the code as you see in below file.

Let’s understand the above code,

Line # 14: this line of code will check the existence of a key.

Line # 17: if the filter Resource object sorted ascending, then it will return the query as appropriate using the expression is used in below line.

Line # 20: It is the vice versa of the line # 17.

Step # 5 => Add Dictionary for mapping.

Now in this step, we will add a new dictionary which is used for mapping. So, go to BookstoreController and then add the code as you see in below.

Line # 10 to 16: Declaring a dictionary with column names.

Line # 17: This line of code is calling a method with parameters which we have created in the IQueryExtensions class.

Step # 6 => Add Click event to table headings.

So, go to bookstore-list.html file and some changes as you see in below code.

Step # 7 => Add logic of click events.

Now, in this step, we will add the logic for click events. So, when a user clicks on the header of the table, then it will sort the list. So, go to bookstore-list.component.ts file, and then add the below code in your file.

Now, run your project and you will see the result as you need.