How to use @ngneat/transloco - 10 common examples

//     useValue: localStorage
    //   }
    // }),
    // TranslocoPersistTranslationsModule.init({
    //   loader: HttpLoader,
    //   storage: {
    //     provide: PERSIST_TRANSLATIONS_STORAGE,
    //     useValue: localStorage
    //   }
    // })
  ],
  providers: [
    httpLoader,
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        prodMode: environment.production,
        availableLangs: [{ id: 'en', label: 'English' }, { id: 'es', label: 'Spanish' }],
        reRenderOnLangChange: true,
        fallbackLang: 'es',
        defaultLang: 'en',
        missingHandler: {
          useFallbackTranslation: false
        }
      })
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export function getTranslocoModule(config: Partial = {}) {
  return TranslocoTestingModule.withLangs(
    {
      en,
      es,
      'admin-page/en': admin,
      'admin-page/es': adminSpanish,
      'lazy-page/en' : lazy,
      'lazy-page/es' : lazySpanish
    },
    {
      availableLangs: ['es', 'en'],
      defaultLang: 'es',
      ...config
    }
  );
}

constructor(
    private service: TranslocoService,
    @Inject(TRANSLOCO_PERSIST_LANG_STORAGE) private storage: PersistStorage,
    @Inject(TRANSLOCO_PERSIST_LANG_CONFIG) private config: PersistLangConfig
  ) {
    this.storageKey = config.storageKey || 'translocoLang';

    if (isBrowser()) {
      this.init();
    }
  }

private decode(key: string, item: any): T | null {
    if (isObject(item)) {
      return item;
    } else if (isString(item)) {
      try {
        return JSON.parse(item);
      } catch (e) {
        console.error(`storage key: ${key} is not serializable`);
        return null;
      }
    }
    return null;
  }

private decode(key: string, item: any): T | null {
    if (isObject(item)) {
      return item;
    } else if (isString(item)) {
      try {
        return JSON.parse(item);
      } catch (e) {
        console.error(`storage key: ${key} is not serializable`);
        return null;
      }
    }
    return null;
  }

it('should translate simple string multiple keys from lang', () => {
    const lang = flatten({
      withKeys: 'with keys',
      from: 'from',
      lang: 'lang',
      nes: { ted: 'supporting nested values!' }
    });
    const parsed = parser.transpile('Hello {{ withKeys }} {{ from }} {{ lang }} {{nes.ted}}', {}, lang);
    expect(parsed).toEqual('Hello with keys from lang supporting nested values!');
  });

const preloads = langs.map(currentLang => {
        const [isScoped, scopedPath] = getPipeValue(currentLang, 'scoped');
        const lang = isScoped ? `${scopedPath}/${service.getActiveLang()}` : currentLang;
        return service.load(lang).pipe(
          tap(() => {
            if (service.config.prodMode === false) {
              console.log(`%c 👁 Preloaded ${lang}`, 'background: #fff; color: #607D8B;');
            }
          })
        );
      });
      this.subscription = forkJoin(preloads).subscribe();

private setActiveLang() {
    const cachedLang = this.storage.getItem(this.storageKey);
    const browserLang = getBrowserLang();
    const cultureLang = getBrowserCultureLang();
    const defaultLang = this.service.config.defaultLang;
    const activeLang = isFunction(this.config.getLangFn)
      ? this.config.getLangFn({
          browserLang,
          defaultLang,
          cultureLang,
          cachedLang
        })
      : cachedLang || defaultLang;

    activeLang && this.service.setActiveLang(activeLang);
  }

private setActiveLang() {
    const cachedLang = this.storage.getItem(this.storageKey);
    const browserLang = getBrowserLang();
    const cultureLang = getBrowserCultureLang();
    const defaultLang = this.service.config.defaultLang;
    const activeLang = isFunction(this.config.getLangFn)
      ? this.config.getLangFn({
          browserLang,
          defaultLang,
          cultureLang,
          cachedLang
        })
      : cachedLang || defaultLang;

    activeLang && this.service.setActiveLang(activeLang);
  }

clear() {
    isBrowser() && this.storage.removeItem(this.storageKey);
  }