Package Exports

ngx-translate-cache
ngx-translate-cache/bundles/ngx-translate-cache.umd.js
ngx-translate-cache/fesm2015/ngx-translate-cache.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-translate-cache) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-translate-cache

Based on and extension of ngx-translate. This is basically a simplified version of localize-router. If you are already using localize-router you don't need this extension. This extension is aimed only to facilitate language cache with ngx-translate.

Angular version	Integration branch	Library version
8 and below	angular1-8	^0.0.0
9	angular9	^9.0.0
10	angular10	^10.0.0

Installation

To install this library, run:

$ npm install ngx-translate-cache --save

Usage

    import { TranslateModule, TranslateService } from '@ngx-translate/core';
    import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';

    @NgModule({
        imports: [
            TranslateModule.forRoot(),
            TranslateCacheModule.forRoot({
              cacheService: {
                provide: TranslateCacheService,
                useFactory: (translateService, translateCacheSettings) => {
                    return new TranslateCacheService(translateService, translateCacheSettings)
                },
                deps: [ TranslateService, TranslateCacheSettings ]
              }
            })
        ],
        ...
    })
    export class AppModule {}

AoT

If you are using AoT AoT compilation or Ionic, you must use an exported function instead of an inline function.

    import { TranslateModule, TranslateService } from '@ngx-translate/core';
    import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';

    export function TranslateCacheFactory(translateService, translateCacheSettings) {
      return new TranslateCacheService(translateService, translateCacheSettings);
    }

    @NgModule({
        imports: [
            TranslateModule.forRoot(),
            TranslateCacheModule.forRoot({
              cacheService: {
                provide: TranslateCacheService,
                useFactory: TranslateCacheFactory,
                deps: [ TranslateService, TranslateCacheSettings ]
              }
            })
        ],
        ...
    })
    export class AppModule {}

Initializing

To initialize ngx-translate you usually do

    import { Component } from '@angular/core';
    import { TranslateService } from '@ngx-translate/core';

    @Component({
        selector: 'app',
        template: `
            <div>{{ 'HELLO' | translate }}</div>
        `
    })
    export class AppComponent {

        constructor(translateService: TranslateService) {
            translateService.setDefaultLang('en');
            translateService.use('en');
        }
    }

To initialize ngx-translate with ngx-translate-cache

    import { Component } from '@angular/core';
    import { TranslateService } from '@ngx-translate/core';
    import { TranslateCacheService } from 'ngx-translate-cache';

    @Component({
        selector: 'app',
        template: `
            <div>{{ 'HELLO' | translate }}</div>
        `
    })
    export class AppComponent {

        constructor(translateService: TranslateService,
                    translateCacheService: TranslateCacheService) {
            translateService.setDefaultLang('en');
            translateCacheService.init();
        }
    }

init method will subscribe to translateService.onLangChange event and update the cached language accordingly.

It also instruct ngx-translate to use the previous cached language if defined, or the browser current language if defined.

The order of precedence is as described below:

1. Cached language.
2. Current language of the browser.
3. Default language (language used as a fallback for *ngx-translate*).

You can also define the cache mechanism used (LocalStorage or Cookie), key used to store cached value and cookie duration (defined in hours).

    import { TranslateModule, TranslateService } from '@ngx-translate/core';
    import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';

    @NgModule({
        imports: [
            TranslateModule.forRoot(),
            TranslateCacheModule.forRoot({
              cacheService: {
                provide: TranslateCacheService,
                useFactory: (translateService, translateCacheSettings) => {
                    return new TranslateCacheService(translateService, translateCacheSettings)
                },
                deps: [ TranslateService, TranslateCacheSettings ]
              },
              cacheName: 'mylang', // default value is 'lang'.
              cacheMechanism: 'Cookie', // default value is 'LocalStorage'.
              cookieExpiry: 1, // default value is 720, a month. Set to a negative value and the cookie becomes a session cookie.
              cookieAttributes: 'SameSite=Strict; Secure' // no default, optional specification of additional attributes.
            })
        ],
        ...
    })
    export class AppModule {}