fix: ngx-datatable localization problem

resolves #4421

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

@@ -1,4 +1,4 @@
-import { ListService } from '@abp/ng.core';
+import { ListService, LocalizationService } from '@abp/ng.core';
 import {
   ChangeDetectorRef,
   Directive,
@@ -21,9 +21,26 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
 
   @Input() list: ListService;
 
-  constructor(private table: DatatableComponent, private cdRef: ChangeDetectorRef) {
+  constructor(
+    private table: DatatableComponent,
+    private cdRef: ChangeDetectorRef,
+    private localizationService: LocalizationService,
+  ) {
+    this.setInitialValues();
+  }
+
+  private setInitialValues() {
     this.table.externalPaging = true;
     this.table.externalSorting = true;
+    this.table.messages = {
+      emptyMessage: this.localizationService.localizeSync(
+        'AbpUi',
+        'NoDataAvailableInDatatable',
+        'No data available',
+      ),
+      totalMessage: this.localizationService.localizeSync('AbpUi', 'Total', 'total'),
+      selectedMessage: this.localizationService.localizeSync('AbpUi', 'Selected', 'selected'),
+    };
   }
 
   private subscribeToPage() {

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

@@ -31,22 +31,6 @@ import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
 import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
 
-export function ngxDatatableMessageFactory(store: Store) {
-  const emptyMessage = store.selectSnapshot(
-    ConfigState.getLocalization('AbpUi::NoDataAvailableInDatatable'),
-  );
-  const totalMessage = store.selectSnapshot(ConfigState.getLocalization('AbpUi::Total'));
-  const selectedMessage = store.selectSnapshot(ConfigState.getLocalization('AbpUi::Selected'));
-
-  return {
-    messages: {
-      emptyMessage,
-      totalMessage,
-      selectedMessage,
-    },
-  } as INgxDatatableConfig;
-}
-
 @NgModule({
   imports: [CoreModule, NgxDatatableModule, NgxValidateCoreModule, NgbPaginationModule],
   declarations: [
@@ -126,11 +110,6 @@ export class ThemeSharedModule {
           deps: [HTTP_ERROR_CONFIG],
         },
         { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
-        {
-          provide: 'configuration',
-          useFactory: ngxDatatableMessageFactory,
-          deps: [Store],
-        },
       ],
     };
   }