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.init({
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.init({
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();
}
}