fix: 🐛 select translation on lang change

also added support for passing in scopes

Author: shaharkazaz

projects/ngneat/transloco/src/lib/tests/service/selectTranslation.spec.ts

@@ -7,11 +7,24 @@ describe('selectTranslation', () => {
 
   beforeEach(() => (service = createService()));
 
+  it('should select the active translation scope', fakeAsync(() => {
+    const spy = jasmine.createSpy();
+    service.selectTranslation('lazy-page').subscribe(spy);
+    runLoader();
+    expect(spy).toHaveBeenCalledWith(flatten(mockLangs['lazy-page/en']));
+    service.setActiveLang('es');
+    runLoader();
+    expect(spy).toHaveBeenCalledWith(flatten(mockLangs['lazy-page/es']));
+  }));
+
   it('should select the active translation lang', fakeAsync(() => {
     const spy = jasmine.createSpy();
     service.selectTranslation().subscribe(spy);
     runLoader();
     expect(spy).toHaveBeenCalledWith(flatten(mockLangs['en']));
+    service.setActiveLang('es');
+    runLoader();
+    expect(spy).toHaveBeenCalledWith(flatten(mockLangs['es']));
   }));
 
   it('should select the translation lang when passing one', fakeAsync(() => {
@@ -20,4 +33,11 @@ describe('selectTranslation', () => {
     runLoader();
     expect(spy).toHaveBeenCalledWith(flatten(mockLangs['es']));
   }));
+
+  it('should select the translation scope when passing one', fakeAsync(() => {
+    const spy = jasmine.createSpy();
+    service.selectTranslation('lazy-page/es').subscribe(spy);
+    runLoader();
+    expect(spy).toHaveBeenCalledWith(flatten(mockLangs['lazy-page/es']));
+  }));
 });

projects/ngneat/transloco/src/lib/transloco.service.ts

@@ -336,12 +336,32 @@ export class TranslocoService implements OnDestroy {
    *
    * @example
    *
-   * selectTranslation().subscribe()
+   * selectTranslation().subscribe() - will return the current lang translation
    * selectTranslation('es').subscribe()
+   * selectTranslation('admin-page').subscribe() - will return the current lang scope translation
+   * selectTranslation('admin-page/es').subscribe()
    */
   selectTranslation(lang?: string): Observable<Translation> {
-    const language = lang || this.getActiveLang();
-    return this.load(language).pipe(map(() => this.getTranslation(language)));
+    let language$ = this.langChanges$;
+    if (lang) {
+      if (this.isLang(lang)) {
+        language$ = of(lang);
+      } else {
+        const { scope } = this.resolveLangAndScope(lang);
+        const mapToScopeValue = language =>
+          map(() => flatten(this.translateObject(scope, null, getLangFromScope(language))));
+        const scopeLangSpecified = getLangFromScope(lang) !== lang;
+        if (scopeLangSpecified) {
+          return this.load(lang).pipe(mapToScopeValue(lang));
+        }
+
+        return language$.pipe(
+          switchMap(currentLang => this.load(`${lang}/${currentLang}`).pipe(mapToScopeValue(currentLang)))
+        );
+      }
+    }
+
+    return language$.pipe(switchMap(language => this.load(language).pipe(map(() => this.getTranslation(language)))));
   }
 
   /**