refactor: create a separate directive to style ngx-datatable

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -20,7 +20,7 @@
   </div>
 
   <div class="card-body">
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
       <ngx-datatable-column
         [name]="'AbpIdentity::Actions' | abpLocalization"
         [maxWidth]="150"

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -30,7 +30,7 @@
       </div>
     </div>
 
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
       <ngx-datatable-column
         [name]="'AbpIdentity::Actions' | abpLocalization"
         [maxWidth]="150"

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -31,7 +31,7 @@
       </div>
     </div>
 
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
       <ngx-datatable-column
         [name]="'AbpTenantManagement::Actions' | abpLocalization"
         [maxWidth]="150"

npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts

@@ -1,3 +1,4 @@
 export * from './loading.directive';
+export * from './ngx-datatable-default.directive';
 export * from './ngx-datatable-list.directive';
 export * from './table-sort.directive';

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, Host, HostBinding, Input } from '@angular/core';
+import { ColumnMode, DatatableComponent } from '@swimlane/ngx-datatable';
+
+@Directive({
+  // tslint:disable-next-line
+  selector: 'ngx-datatable[default]',
+  exportAs: 'ngxDatatableDefault',
+})
+export class NgxDatatableDefaultDirective {
+  @Input() class = 'material bordered';
+
+  @HostBinding('class')
+  get classes(): string {
+    return `ngx-datatable ${this.class}`;
+  }
+
+  constructor(@Host() private table: DatatableComponent) {
+    this.table.columnMode = ColumnMode.force;
+    this.table.footerHeight = 50;
+    this.table.headerHeight = 50;
+    this.table.rowHeight = 'auto';
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts

@@ -3,40 +3,28 @@ import {
   ChangeDetectorRef,
   Directive,
   Host,
-  HostBinding,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   SimpleChanges,
 } from '@angular/core';
-import { ColumnMode, DatatableComponent } from '@swimlane/ngx-datatable';
+import { DatatableComponent } from '@swimlane/ngx-datatable';
 import { Subscription } from 'rxjs';
 
 @Directive({
-  exportAs: 'abpList',
+  // tslint:disable-next-line
-  selector: 'ngx-datatable[abpList]',
+  selector: 'ngx-datatable[list]',
+  exportAs: 'ngxDatatableList',
 })
 export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
   private subscription = new Subscription();
 
-  /* tslint:disable-next-line:no-input-rename */
+  @Input() list: ListService;
-  @Input('abpList') list: ListService;
-
-  @Input() class = 'material bordered';
-
-  @HostBinding('class')
-  get classes(): string {
-    return `ngx-datatable ${this.class}`;
-  }
 
   constructor(@Host() private cdRef: ChangeDetectorRef, @Host() private table: DatatableComponent) {
-    this.table.columnMode = ColumnMode.force;
     this.table.externalPaging = true;
     this.table.externalSorting = true;
-    this.table.footerHeight = 50;
-    this.table.headerHeight = 50;
-    this.table.rowHeight = 'auto';
   }
 
   ngOnChanges({ list }: SimpleChanges) {

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -21,6 +21,7 @@ import { TableComponent } from './components/table/table.component';
 import { ToastContainerComponent } from './components/toast-container/toast-container.component';
 import { ToastComponent } from './components/toast/toast.component';
 import { LoadingDirective } from './directives/loading.directive';
+import { NgxDatatableDefaultDirective } from './directives/ngx-datatable-default.directive';
 import { NgxDatatableListDirective } from './directives/ngx-datatable-list.directive';
 import { TableSortDirective } from './directives/table-sort.directive';
 import { ErrorHandler } from './handlers/error.handler';
@@ -64,6 +65,7 @@ export function ngxDatatableMessageFactory(store: Store) {
     ToastComponent,
     ToastContainerComponent,
     SortOrderIconComponent,
+    NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
     LoadingDirective,
     TableSortDirective,
@@ -83,6 +85,7 @@ export function ngxDatatableMessageFactory(store: Store) {
     ToastComponent,
     ToastContainerComponent,
     SortOrderIconComponent,
+    NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
     LoadingDirective,
     TableSortDirective,