feat(service): add getStreamOnTranslationChange method

MKhowaja · web-flow · commit ef48ea8e385c · 2020-02-05T17:04:37.000+01:00
diff --git a/README.md b/README.md
@@ -384,6 +384,7 @@ To render them, simply use the `innerHTML` attribute with the pipe on any elemen
 - `addLangs(langs: Array<string>)`: Add new langs to the list
 - `getLangs()`: Returns an array of currently available langs
 - `get(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>`: Gets the translated value of a key (or an array of keys) or the key if the value was not found
+- `getStreamOnTranslationChange(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>`: Returns a stream of translated values of a key (or an array of keys) or the key if the value was not found. Without any `onTranslationChange` events this returns the same value as `get` but it will also emit new values whenever the translation changes.
 - `stream(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>`: Returns a stream of translated values of a key (or an array of keys) or the key if the value was not found. Without any `onLangChange` events this returns the same value as `get` but it will also emit new values whenever the used language changes.
 - `instant(key: string|Array<string>, interpolateParams?: Object): string|Object`: Gets the instant translated value of a key (or an array of keys). /!\ This method is **synchronous** and the default file loader is asynchronous. You are responsible for knowing when your translations have been loaded and it is safe to use this method. If you are not sure then you should use the `get` method instead.
 - `set(key: string, value: string, lang?: string)`: Sets the translated value of a key
diff --git a/projects/ngx-translate/core/src/lib/translate.service.ts b/projects/ngx-translate/core/src/lib/translate.service.ts
@@ -377,6 +377,31 @@ export class TranslateService {
     }
   }
 
+  /**
+   * Returns a stream of translated values of a key (or an array of keys) which updates
+   * whenever the translation changes.
+   * @returns A stream of the translated key, or an object of translated keys
+   */
+  public getStreamOnTranslationChange(key: string | Array<string>, interpolateParams?: Object): Observable<string | any> {
+    if (!isDefined(key) || !key.length) {
+      throw new Error(`Parameter "key" required`);
+    }
+
+    return concat(
+      this.get(key, interpolateParams),
+      this.onTranslationChange.pipe(
+        switchMap((event: TranslationChangeEvent) => {
+          const res = this.getParsedResult(event.translations, key, interpolateParams);
+          if (typeof res.subscribe === 'function') {
+            return res;
+          } else {
+            return of(res);
+          }
+        })
+      )
+    );
+  }
+
   /**
    * Returns a stream of translated values of a key (or an array of keys) which updates
    * whenever the language changes.
diff --git a/projects/ngx-translate/core/tests/translate.service.spec.ts b/projects/ngx-translate/core/tests/translate.service.spec.ts
@@ -204,6 +204,53 @@ describe('TranslateService', () => {
     });
   });
 
+  it('should be able to get a stream array', (done: Function) => {
+    let tr = {"TEST": "This is a test", "TEST2": "This is a test2"};
+    translate.setTranslation('en', tr);
+    translate.use('en');
+
+    translate.getStreamOnTranslationChange(['TEST', 'TEST2']).subscribe((res: any) => {
+      expect(res).toEqual(tr);
+      done();
+    });
+  });
+
+  it('should initially return the same value for getStreamOnTranslationChange and non-streaming get', (done: Function) => {
+    translations = {"TEST": "This is a test"};
+    translate.use('en');
+
+    zip(translate.getStreamOnTranslationChange('TEST'), translate.get('TEST')).subscribe((value: [string, string]) => {
+      const [streamed, nonStreamed] = value;
+      expect(streamed).toEqual('This is a test');
+      expect(streamed).toEqual(nonStreamed);
+      done();
+    });
+  });
+
+  it('should be able to stream a translation on translation change', (done: Function) => {
+    translations = {"TEST": "This is a test"};
+    translate.use('en');
+
+    translate.getStreamOnTranslationChange('TEST').pipe(take(3), toArray()).subscribe((res: string[]) => {
+      const expected = ['This is a test', 'I changed the test value!', 'I changed it again!'];
+      expect(res).toEqual(expected);
+      done();
+    });
+    translate.setTranslation('en', {"TEST": "I changed the test value!"});
+    translate.setTranslation('en', {"TEST": "I changed it again!"});
+  });
+
+  it('should interpolate the same param into each streamed value when get strean on translation change', (done: Function) => {
+    translations = {"TEST": "This is a test {{param}}"};
+    translate.use('en');
+
+    translate.getStreamOnTranslationChange('TEST', {param: 'with param'}).subscribe((res: string[]) => {
+      const expected = 'This is a test with param';
+      expect(res).toEqual(expected);
+      done();
+    });
+  });
+
   it('should be able to stream a translation for the current language', (done: Function) => {
     translations = {"TEST": "This is a test"};
     translate.use('en');
