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 d71f6cce5e..eb45a485a8 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
@@ -19,12 +19,12 @@
     </div>
   </div>
 
-  <div class="">
+  <div class="card-body">
     <ngx-datatable
       [rows]="data$ | async"
       [loadingIndicator]="list.isLoading$ | async"
       [externalSorting]="true"
-      (sort)="onSort($event)"
+      (sort)="sort($event)"
       [externalPaging]="true"
       [count]="totalCount$ | async"
       [offset]="list.page - 1"
@@ -41,7 +41,7 @@
         [maxWidth]="150"
         [sortable]="false"
       >
-        <ng-template let-value="value" ngx-datatable-cell-template>
+        <ng-template let-row="row" ngx-datatable-cell-template>
           <div ngbDropdown container="body" class="d-inline-block">
             <button
               class="btn btn-primary btn-sm dropdown-toggle"
@@ -55,22 +55,22 @@
               <button
                 *abpPermission="'AbpIdentity.Roles.Update'"
                 ngbDropdownItem
-                (click)="edit(value.id)"
+                (click)="edit(row.id)"
               >
                 {{ 'AbpIdentity::Edit' | abpLocalization }}
               </button>
               <button
                 *abpPermission="'AbpIdentity.Roles.ManagePermissions'"
                 ngbDropdownItem
-                (click)="openPermissionsModal(value.name)"
+                (click)="openPermissionsModal(row.name)"
               >
                 {{ 'AbpIdentity::Permissions' | abpLocalization }}
               </button>
               <button
-                *ngIf="!value.isStatic"
+                *ngIf="!row.isStatic"
                 [abpPermission]="'AbpIdentity.Roles.Delete'"
                 ngbDropdownItem
-                (click)="delete(value.id, value.name)"
+                (click)="delete(row.id, row.name)"
               >
                 {{ 'AbpIdentity::Delete' | abpLocalization }}
               </button>
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 e2dc5fa59d..09582f4e9f 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
@@ -38,8 +38,6 @@ export class RolesComponent implements OnInit {
 
   providerKey: string;
 
-  loading = false;
-
   modalBusy = false;
 
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
@@ -139,8 +137,8 @@ export class RolesComponent implements OnInit {
     }, 0);
   }
 
-  onSort(event) {
-    const { prop, dir } = event.sorts[0];
+  sort(data) {
+    const { prop, dir } = data.sorts[0];
     this.list.sortKey = prop;
     this.list.sortOrder = dir;
   }