diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index c6d86b5968..acc0f578ef 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -51,9 +51,14 @@
       <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="sortByKey('name')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('name')">
             {{ 'AbpIdentity::RoleName' | abpLocalization }}
-            <abp-sort-order-icon key="name" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
+            <abp-sort-order-icon
+              #sortOrderIcon
+              key="name"
+              [(selectedKey)]="sortKey"
+              [(order)]="sortOrder"
+            ></abp-sort-order-icon>
           </th>
         </tr>
       </ng-template>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index f179e6b713..f98963722f 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -36,9 +36,9 @@ export class RolesComponent {
 
   modalBusy = false;
 
-  sortOrder: string = '';
+  sortOrder = '';
 
-  sortKey: string = '';
+  sortKey = '';
 
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
@@ -123,22 +123,4 @@ export class RolesComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
-
-  sortByKey(sortKey: string) {
-    this.sortKey = sortKey;
-    switch (this.sortOrder) {
-      case '':
-        this.sortOrder = 'asc';
-        break;
-      case 'asc':
-        this.sortOrder = 'desc';
-        break;
-      case 'desc':
-        this.sortOrder = '';
-        this.sortKey = '';
-        break;
-      default:
-        break;
-    }
-  }
 }
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 4bc837f1fd..36683ed839 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -58,20 +58,20 @@
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="usernameSortIcon.sort('userName')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('userName')">
             {{ 'AbpIdentity::UserName' | abpLocalization }}
             <abp-sort-order-icon
-              #usernameSortIcon
+              #sortOrderIcon
               key="userName"
               [(selectedKey)]="sortKey"
               [(order)]="sortOrder"
             ></abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="usernameSortIcon.sort('email')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('email')">
             {{ 'AbpIdentity::EmailAddress' | abpLocalization }}
             <abp-sort-order-icon key="email" [(selectedKey)]="sortKey" [(order)]="sortOrder"></abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="usernameSortIcon.sort('phoneNumber')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('phoneNumber')">
             {{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
             <abp-sort-order-icon
               key="phoneNumber"