Persist Lang

This plugin provides the functionality of persisting the active language to the provided storage.

Installation​

pnpm

pnpm add @jsverse/transloco-persist-lang

yarn

yarn add @jsverse/transloco-persist-lang

npm

npm install @jsverse/transloco-persist-lang

Usage​

Standalone

Add persist lang providers using the into the app's providers, and provide the storage you would like to use:

import { provideTranslocoPersistLang } from '@jsverse/transloco-persist-lang';

bootstrapApplication(AppComponent, {
  providers: [
    provideTranslocoPersistLang({
      storage: {
        useValue: localStorage,
      },
    }),
  ],
});

When the user changes the current language, the plugin will keep it in the provided storage and set it as active when the user returns to the application.

By default, the plugin will use the cached language if available otherwise it will use the default language provided in the config. You can always change this behavior by providing a getLangFn option:

import { provideTranslocoPersistLang } from '@jsverse/transloco-persist-lang';

export function getLangFn({
  cachedLang,
  browserLang,
  cultureLang,
  defaultLang,
}) {
  return yourLogic;
}

bootstrapApplication(AppComponent, {
  providers: [
    provideTranslocoPersistLang({
      getLangFn,
      storage: {
        useValue: localStorage,
      },
    }),
  ],
});

The plugin also provides a cookiesStorage function that you can use to save the language in a cookie. (SSR advantage)

import { provideTranslocoPersistLang, cookiesStorage } from '@jsverse/transloco-persist-lang';

bootstrapApplication(AppComponent, {
  providers: [
    provideTranslocoPersistLang({
      storage: {
        useValue: cookiesStorage(),
      },
    }),
  ],
});

NgModule

Add persist lang providers using the into the TranslocoRootModule, and provide the storage you would like to use:

transloco-root.module.ts

import { provideTranslocoPersistLang } from '@jsverse/transloco-persist-lang';

@NgModule({
  providers: [
    provideTranslocoPersistLang({
      storage: {
        useValue: localStorage,
      },
    }),
  ],
  ...
})
export class TranslocoRootModule {}

When the user changes the current language, the plugin will keep it in the provided storage and set it as active when the user returns to the application.

By default, the plugin will use the cached language if available otherwise it will use the default language provided in the config. You can always change this behavior by providing a getLangFn option:

transloco-root.module.ts

import { provideTranslocoPersistLang } from '@jsverse/transloco-persist-lang';

export function getLangFn({
  cachedLang,
  browserLang,
  cultureLang,
  defaultLang,
}) {
  return yourLogic;
}

@NgModule({
  providers: [
    provideTranslocoPersistLang({
      getLangFn,
      storage: {
        useValue: localStorage,
      },
    }),
  ],
  ...
})
export class TranslocoRootModule {}

The plugin also provides a cookiesStorage function that you can use to save the language in a cookie. (SSR advantage)

transloco-root.module.ts

import { provideTranslocoPersistLang, cookiesStorage } from '@jsverse/transloco-persist-lang';

@NgModule({
  imports: [
    provideTranslocoPersistLang({
      storage: {
        useValue: cookiesStorage(),
      },
    }),
  ],
  ...
})
export class TranslocoRootModule {}