Skip to content
No description, website, or topics provided.
JavaScript TypeScript HTML
Branch: master
Clone or download
jgpacheco Cookie expiry value ignored bug fixed (#7)
* Cookie expiry value ignored bug fixed
Latest commit 449c099 Jan 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
playground Initial commit Oct 17, 2017
src Cookie expiry value ignored bug fixed (#7) Jan 24, 2019
tools/gulp Scaffolding Oct 17, 2017
.gitignore
.npmignore Scaffolding Oct 17, 2017
.travis.yml Scaffolding Oct 17, 2017
.yo-rc.json Scaffolding Oct 17, 2017
CHANGELOG.md Cookie expiry value ignored bug fixed (#7) Jan 24, 2019
LICENSE Initial commit Oct 17, 2017
README.MD
bs-config.json Scaffolding Oct 17, 2017
gulpfile.js Scaffolding Oct 17, 2017
package-lock.json CHANGELOG added (#6) Jan 23, 2019
package.json CHANGELOG added (#6) Jan 23, 2019
tsconfig.json Scaffolding Oct 17, 2017
tslint.json Scaffolding Oct 17, 2017

README.MD

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.

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

You can’t perform that action at this time.