Skip to main content

Persist Translations

This plugin provides the functionality of persisting translations to the provided storage.

Installation#

npm install @ngneat/transloco-persist-translations

Usage#

Import the TranslocoPersistTranslationsModule module into the TranslocoRootModule, and provide the storage you would like to use:

transloco-root.module.ts
import {  TranslocoPersistTranslationsModule,  PERSIST_TRANSLATIONS_STORAGE} from '@ngneat/transloco-persist-translations';
@NgModule({  imports: [      TranslocoPersistTranslationsModule.forRoot({        loader: TranslocoHttpLoader, ====> Auto generated via ng add        storage: {          provide: PERSIST_TRANSLATIONS_STORAGE,          useValue: localStorage        }      })  ],  ...})export class TranslocoRootModule {}

Note that you should not include the default loader to make it work.

You can also use an async storage. For example, let's install localForage and use IndexedDB:

transloco-root.module.ts
import {  TranslocoPersistTranslationsModule,  PERSIST_TRANSLATIONS_STORAGE} from '@ngneat/transloco-persist-translations';import * as localForage from 'localforage';
localForage.config({  driver: localForage.INDEXEDDB,  name: 'Transloco',  storeName: 'translations'});
@NgModule({  imports: [    TranslocoPersistTranslationsModule.forRoot({      loader: TranslocoHttpLoader,      storage: {        provide: PERSIST_TRANSLATIONS_STORAGE,        useValue: localForage      }    })  ],  ...})export class TranslocoRootModule {}

Configuration#

TranslocoPersistTranslationsModule can also receive the following configuration:

{  "ttl": 86400,  "storageKey": "yourKey"}
  • ttl: How long the cache should live in seconds.
  • storageKey: The key to be used to save the translations data.

Clear Storage#

The storage cleanup is done automatically once the ttl is passed, but it could also can be done manually by calling clearCache method from the cache service:

app.component.ts
import { TranslocoPersistTranslations } from '@ngneat/transloco-persist-translations';
export class AppComponent {  constructor(private loader: TranslocoPersistTranslations) {}
  clearTranslationsCache() {    this.loader.clearCache();  }}