feat(translate.service): $currentLang

README.md

@@ -41,34 +41,41 @@ Simple example using ngx-translate:
 https://stackblitz.com/github/ngx-translate/example
 
 ### Table of Contents
-* [Installation](#installation)
-* [Usage](#usage)
-  * [Import the TranslateModule](#1-import-the-translatemodule)
-    * [SharedModule](#sharedmodule)
-    * [Lazy loaded modules](#lazy-loaded-modules)
-    * [Configuration](#configuration)
-    * [AoT](#aot)
-  * [Define the default language for the application](#2-define-the-default-language-for-the-application)
-  * [Init the TranslateService for your application](#3-init-the-translateservice-for-your-application)
-  * [Define the translations](#4-define-the-translations)
-  * [Use the service, the pipe or the directive](#5-use-the-service-the-pipe-or-the-directive)
-  * [Use HTML tags](#6-use-html-tags)
-* [API](#api)
-  * [TranslateService](#translateservice)
-    * [Properties](#properties)
-    * [Methods](#methods)
-    * [Write & use your own loader](#write--use-your-own-loader)
-      * [Example](#example)
-    * [How to use a compiler to preprocess translation values](#how-to-use-a-compiler-to-preprocess-translation-values)
-    * [How to handle missing translations](#how-to-handle-missing-translations)
-      * [Example](#example-1)
-  * [Parser](#parser)
-    * [Methods](#methods)
-* [FAQ](#faq)
-  * [I'm getting an error `npm ERR! peerinvalid Peer [...]`](#im-getting-an-error-npm-err-peerinvalid-peer-)
-* [Plugins](#plugins)
-* [Editors](#editors)
-* [Additional Framework Support](#additional-framework-support)
+- [@ngx-translate/core  ](#ngx-translatecore--)
+  - [Angular 16, 17, 18, 19+](#angular-16-17-18-19)
+  - [Angular \<=15](#angular-15)
+    - [Table of Contents](#table-of-contents)
+    - [Installation](#installation)
+    - [Usage](#usage)
+      - [1. Import the `TranslateModule`:](#1-import-the-translatemodule)
+        - [SharedModule](#sharedmodule)
+        - [Lazy loaded modules](#lazy-loaded-modules)
+        - [Configuration](#configuration)
+        - [AoT](#aot)
+      - [2. Define the `default language` for the application](#2-define-the-default-language-for-the-application)
+      - [3. Init the `TranslateService` for your application:](#3-init-the-translateservice-for-your-application)
+      - [4. Define the translations:](#4-define-the-translations)
+      - [5. Use the service, the pipe or the directive:](#5-use-the-service-the-pipe-or-the-directive)
+      - [6. Use HTML tags:](#6-use-html-tags)
+    - [API](#api)
+    - [TranslateService](#translateservice)
+      - [Properties:](#properties)
+      - [Methods:](#methods)
+      - [Write \& use your own loader](#write--use-your-own-loader)
+        - [Example](#example)
+      - [How to use a compiler to preprocess translation values](#how-to-use-a-compiler-to-preprocess-translation-values)
+      - [How to handle missing translations](#how-to-handle-missing-translations)
+        - [Example:](#example-1)
+    - [Parser](#parser)
+      - [Methods:](#methods-1)
+  - [FAQ](#faq)
+      - [I'm getting an error `npm ERR! peerinvalid Peer [...]`](#im-getting-an-error-npm-err-peerinvalid-peer-)
+      - [I want to hot reload the translations in my application but `reloadLang` does not work](#i-want-to-hot-reload-the-translations-in-my-application-but-reloadlang-does-not-work)
+  - [Plugins](#plugins)
+  - [Editors](#editors)
+    - [Extensions](#extensions)
+      - [VScode](#vscode)
+  - [Additional Framework Support](#additional-framework-support)
 
 
 ### Installation
@@ -401,6 +408,7 @@ To render them, simply use the `innerHTML` attribute with the pipe on any elemen
 #### Properties:
 
 - `currentLang`: The lang currently used
+- `$currentLang`: The lang currently used as an signal
 - `currentLoader`: An instance of the loader currently used (static loader by default)
 - `onLangChange`: An EventEmitter to listen to lang change events. A `LangChangeEvent` is an object with the properties `lang: string` & `translations: any` (an object containing your translations).
 

projects/ngx-translate/src/lib/translate.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, InjectionToken } from "@angular/core";
+import { Inject, Injectable, InjectionToken, Signal } from "@angular/core";
 import { concat, defer, forkJoin, isObservable, Observable, of } from "rxjs";
 import { concatMap, map, shareReplay, switchMap, take } from "rxjs/operators";
 import { MissingTranslationHandler } from "./missing-translation-handler";
@@ -88,6 +88,8 @@ export class TranslateService {
   private _translationRequests: Record<Language, Observable<TranslationObject>> = {};
   private lastUseLanguage: Language|null = null;
 
+  $currentLang!: Signal<Language>;
+
 
   /**
    * An Observable to listen to translation change events
@@ -171,6 +173,8 @@ export class TranslateService {
     if (defaultLanguage) {
       this.setDefaultLang(defaultLanguage);
     }
+
+    this.$currentLang = this.store.$currentLang.asReadonly();
   }
 
   /**

projects/ngx-translate/src/lib/translate.store.ts

@@ -1,11 +1,14 @@
+import { signal } from '@angular/core';
+import { Observable, Subject } from "rxjs";
 import {
-    InterpolatableTranslationObject,
-    DefaultLangChangeEvent,
-    LangChangeEvent,
-    TranslationChangeEvent, Language, InterpolatableTranslation
+  DefaultLangChangeEvent,
+  InterpolatableTranslation,
+  InterpolatableTranslationObject,
+  LangChangeEvent,
+  Language,
+  TranslationChangeEvent
 } from "./translate.service";
-import {Observable, Subject} from "rxjs";
-import {getValue, mergeDeep} from "./util";
+import { getValue, mergeDeep } from "./util";
 
 
 type DeepReadonly<T> = {
@@ -21,6 +24,7 @@ export class TranslateStore
 
     private defaultLang!: Language;
     private currentLang!: Language;
+    $currentLang = signal<Language>(this.currentLang);
 
     private translations: Record<Language, InterpolatableTranslationObject> = {};
     private languages: Language[] = [];
@@ -67,6 +71,8 @@ export class TranslateStore
     public setCurrentLang(lang: string, emitChange = true): void
     {
         this.currentLang = lang;
+        this.$currentLang.set(lang);
+
         if (emitChange)
         {
             this._onLangChange.next({lang: lang, translations: this.translations[lang]});