Neatly Packaged Manuals

    ngx-translate-cache
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.2 • Public • Published

    ngx-translate-cache

    NPM version MIT License

    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 master ^9.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.
                })
            ],
            ...
        })
        export class AppModule {}

    License

    MIT © Jaime

    Install

    npm i ngx-translate-cache

    DownloadsWeekly Downloads

    3,115

    Version

    9.0.2

    License

    MIT

    Unpacked Size

    150 kB

    Total Files

    24

    Last publish

    Collaborators

    • jaime.glez.pacheco