@flusys/ng-localization 5.0.3 → 5.0.4

package/README.md

@@ -15,19 +15,19 @@ npm install @flusys/ng-localization
 
 ## 1. Register Providers
 
-Call `provideLocalization()` once in `app.config.ts`. It registers `TRANSLATE_ADAPTER` (consumed by `TranslatePipe` from `ng-shared`), an `APP_INITIALIZER` that loads translations before the first render, and optionally the topbar language selector.
+Call `provideLocalization()` once in `app.config.ts`. It registers ``(consumed by`TranslatePipe`from`ng-shared`), an `APP_INITIALIZER` that loads translations before the first render, and optionally the topbar language selector.
 
 ```typescript
 // app.config.ts
-import { provideLocalization } from '@flusys/ng-localization';
+import { provideLocalization } from "@flusys/ng-localization";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideLocalization({
-      defaultLanguageCode: 'en',       // required — fallback when no saved preference
-      loadStrategy: 'modules',          // optional — 'modules' (default) or 'all'
-      initialModules: [],               // optional — modules to pre-load at startup
-      enableLayoutSelector: true,       // optional — renders language picker in AppTopbar
+      defaultLanguageCode: "en", // required — fallback when no saved preference
+      loadStrategy: "modules", // optional — 'modules' (default) or 'all'
+      initialModules: [], // optional — modules to pre-load at startup
+      enableLayoutSelector: true, // optional — renders language picker in AppTopbar
     }),
   ],
 };
@@ -39,24 +39,26 @@ export const appConfig: ApplicationConfig = {
 
 Import `TranslatePipe` from `@flusys/ng-shared` (not from this package). The pipe is signal-reactive and re-renders automatically on language change.
 language
+
 ```typescript
-import { TranslatePipe } from '@flusys/ng-shared';
+import { TranslatePipe } from "@flusys/ng-shared";
 
 @Component({
   imports: [TranslatePipe],
   template: `
-    <h1>{{ 'dashboard.title' | translate }}</h1>
-    <button>{{ 'shared.save' | translate }}</button>
+    <h1>{{ "dashboard.title" | translate }}</h1>
+    <button>{{ "shared.save" | translate }}</button>
     <input [placeholder]="'form.search.placeholder' | translate" />
 
     <!-- With interpolation -->
-    <p>{{ 'pagination.showing' | translate: { from: 1, to: 10, total: 100 } }}</p>
+    <p>{{ "pagination.showing" | translate: { from: 1, to: 10, total: 100 } }}</p>
   `,
 })
 export class DashboardComponent {}
 ```
 
 Translation values stored in the database use `{{variableName}}` syntax:
+
 ```
 Key:   pagination.showing
 Value: Showing {{from}}-{{to}} of {{total}} results
@@ -68,21 +70,22 @@ Use `resolveTranslationModule()` in your route definition so translations for a
 
 ```typescript
 // Inside a feature's routes file
-import { resolveTranslationModule } from '@flusys/ng-shared';
-import { MY_FEATURE_MESSAGES } from './constants/messages';
+import { resolveTranslationModule } from "@flusys/ng-shared";
+import { MY_FEATURE_MESSAGES } from "./constants/messages";
 
 export const MY_ROUTES: Routes = [
   {
-    path: '',
+    path: "",
     resolve: {
       translations: resolveTranslationModule({
-        modules: ['myFeature'],            // module name used by the backend
+        modules: ["myFeature"], // module name used by the backend
         fallbackMessages: MY_FEATURE_MESSAGES, // static fallback map
       }),
     },
-    loadComponent: () => import('./my-feature-container.component')
-      .then(m => m.MyFeatureContainerComponent),
-    children: [/* ... */],
+    loadComponent: () => import("./my-feature-container.component").then((m) => m.MyFeatureContainerComponent),
+    children: [
+      /* ... */
+    ],
   },
 ];
 ```
@@ -94,24 +97,24 @@ Already-loaded modules are cached — navigating back to the same route does not
 Inject `TranslateService` when you need a string outside a template (e.g., toast messages, computed labels).
 
 ```typescript
-import { inject } from '@angular/core';
-import { TranslateService } from '@flusys/ng-localization';
+import { inject } from "@angular/core";
+import { TranslateService } from "@flusys/ng-localization";
 
 export class MyComponent {
   private readonly translate = inject(TranslateService);
 
   // Synchronous — returns fallback key if not found
   getLabel(): string {
-    return this.translate.translate('shared.save');
+    return this.translate.translate("shared.save");
   }
 
   // With params
   getCountLabel(count: number): string {
-    return this.translate.translate('items.count', { count });
+    return this.translate.translate("items.count", { count });
   }
 
   // Signal-based — updates automatically on language change
-  readonly pageTitle = this.translate.translateSignal('dashboard.title');
+  readonly pageTitle = this.translate.translateSignal("dashboard.title");
 
   // Read current language code
   readonly lang = this.translate.languageCode; // Signal<string>
@@ -122,11 +125,11 @@ export class MyComponent {
 
 ```typescript
 // app.routes.ts
-import { LOCALIZATION_ROUTES } from '@flusys/ng-localization';
+import { LOCALIZATION_ROUTES } from "@flusys/ng-localization";
 
 export const routes: Routes = [
   {
-    path: 'localization',
+    path: "localization",
     loadChildren: () => LOCALIZATION_ROUTES,
   },
 ];